/* ============================================================
   TÀI LIỆU ĐÍNH KÈM + FLIPBOOK
   Dùng ở: app/Views/frontend/posts/show.php (chỉ nạp khi bài có tài liệu)
   JS đi kèm: public/assets/js/flipbook.js
   ============================================================ */

:root {
    --fb-gold: #c9a227;
    --fb-gold-lt: #f0d98c;
    --fb-ink: #2a2118;
    --fb-gold-dk: #8a6d12;

    /* Vàng ánh kim nhạt: các chặng sáng/tối xen kẽ tạo cảm giác kim loại phản quang.
       Dùng cho thanh tiêu đề khối tài liệu và nút "Xem". */
    --fb-metal: linear-gradient(135deg,
            #fdf7e6 0%,
            #f2e1ad 22%,
            #e6cd85 44%,
            #fbf3da 58%,
            #e4c87c 80%,
            #f7ecd3 100%);
}

/* ---------- Khối danh sách tài liệu trong bài viết ---------- */
.doc-block {
    margin: 32px 0;
    border-radius: 16px;
    background: linear-gradient(160deg, #fffdf7 0%, #fff 55%);
    border: 1px solid #ecd9a8;
    box-shadow: 0 10px 30px rgba(140, 110, 20, .08);
    overflow: hidden;
}

.doc-block__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--fb-metal);
    color: var(--fb-ink);
    position: relative;
    /* Vệt sáng mảnh ở mép trên = ánh phản quang của kim loại */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.doc-block__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    /* Nền đã sáng nên đường viền phải đậm hơn mới tách được khỏi thân khối */
    background: linear-gradient(90deg, transparent, var(--fb-gold), var(--fb-gold-dk), var(--fb-gold), transparent);
}

.doc-block__head i {
    color: var(--fb-gold-dk);
    font-size: 15px;
}

.doc-block__title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin: 0;
}

.doc-block__count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--fb-ink);
    /* Nền thanh tiêu đề nay cũng là vàng nên huy hiệu phải sáng hơn mới nổi lên được */
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(138, 109, 18, .32);
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

.doc-block__body {
    padding: 16px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------- Thẻ tài liệu ---------- */
.doc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #eee5cf;
    border-radius: 13px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.doc-card:hover {
    transform: translateY(-2px);
    border-color: var(--fb-gold);
    box-shadow: 0 12px 28px rgba(140, 110, 20, .14);
}

.doc-card__ico {
    width: 50px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 8px 10px 10px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 21px;
    position: relative;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

/* Gáy tài liệu bên trái cho ra dáng "quyển" */
.doc-card__ico::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 8px 0 0 8px;
    background: rgba(0, 0, 0, .22);
}

.doc-card__ico--pdf { background: linear-gradient(150deg, #f05252, #b91c1c); }
.doc-card__ico--doc { background: linear-gradient(150deg, #4f8ff7, #1d4ed8); }
.doc-card__ico--xls { background: linear-gradient(150deg, #35c76a, #15803d); }

.doc-card__body {
    flex: 1;
    min-width: 0;
}

.doc-card__name {
    font-size: 15px;
    font-weight: 700;
    color: #1f1a15;
    line-height: 1.35;
    margin: 0 0 4px;
    word-break: break-word;
}

.doc-card__meta {
    font-size: 12px;
    color: #8b8175;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.doc-card__tag {
    font-weight: 800;
    font-size: 10px;
    letter-spacing: .6px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fff;
}

.doc-card__tag--pdf { background: #b91c1c; }
.doc-card__tag--doc { background: #1d4ed8; }
.doc-card__tag--xls { background: #15803d; }

.doc-card__act {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .2s, transform .2s, background .2s;
    font-family: inherit;
}

.doc-btn--view {
    background: var(--fb-metal);
    color: var(--fb-ink);
    border: 1px solid #d9be74;
    box-shadow: 0 6px 16px rgba(160, 125, 25, .26),
                inset 0 1px 0 rgba(255, 255, 255, .8);
}

/* Nền đã sáng sẵn: tăng brightness nữa sẽ bạc trắng, nên chỉ đậm màu lên chút. */
.doc-btn--view:hover {
    filter: saturate(1.18) brightness(.97);
    transform: translateY(-1px);
}

.doc-btn--dl {
    background: #f6f2e6;
    color: #6b5a2c;
    border: 1px solid #e6d9b4;
}

.doc-btn--dl:hover {
    background: #efe7d0;
    color: #4a3d1c;
}

/* ---------- Trình xem toàn màn hình ---------- */
.fb-viewer {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    flex-direction: column;
    background: radial-gradient(ellipse at 50% 42%, #3b322a 0%, #1a1613 55%, #0c0a09 100%);
    opacity: 0;
    transition: opacity .3s ease;
}

.fb-viewer.is-open {
    display: flex;
    opacity: 1;
}

body.fb-lock {
    overflow: hidden;
}

/* Thanh công cụ trên */
.fb-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(12, 10, 9, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(201, 162, 39, .28);
    flex-shrink: 0;
}

.fb-bar__title {
    font-size: 14px;
    font-weight: 700;
    color: #f4ecd8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.fb-bar__title small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: #9b8f7c;
    letter-spacing: .4px;
    text-transform: uppercase;
    margin-top: 1px;
}

.fb-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(201, 162, 39, .3);
    background: rgba(255, 255, 255, .05);
    color: var(--fb-gold-lt);
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .2s, color .2s, transform .2s;
    text-decoration: none;
}

.fb-ico:hover {
    background: var(--fb-gold);
    color: #14110f;
    transform: translateY(-1px);
}

.fb-ico:disabled {
    opacity: .3;
    cursor: default;
    transform: none;
}

/* Sân khấu chứa flipbook */
.fb-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

.fb-book {
    /* StPageFlip tự set kích thước; bóng đổ để quyển sách "nổi" khỏi nền */
    filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .6));
}

.fb-page {
    background: #fff;
    overflow: hidden;
}

.fb-page canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Ô giữ chỗ khi trang chưa render xong */
.fb-skel {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, #f4f1ea 30%, #fbf9f4 50%, #f4f1ea 70%);
    background-size: 220% 100%;
    animation: fb-shimmer 1.3s linear infinite;
}

@keyframes fb-shimmer {
    to { background-position: -220% 0; }
}

/* Thanh điều khiển dưới */
.fb-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(12, 10, 9, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(201, 162, 39, .28);
    flex-shrink: 0;
}

.fb-counter {
    font-size: 13px;
    font-weight: 700;
    color: #f4ecd8;
    min-width: 92px;
    text-align: center;
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
}

.fb-counter span {
    color: #9b8f7c;
    font-weight: 500;
}

/* Trạng thái nạp / lỗi */
.fb-state {
    text-align: center;
    color: #cbbfa8;
    font-size: 14px;
    padding: 30px;
    max-width: 460px;
}

.fb-state > i {
    font-size: 34px;
    color: var(--fb-gold);
    display: block;
    margin-bottom: 14px;
}

.fb-state__bar {
    height: 4px;
    width: 190px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
    overflow: hidden;
}

.fb-state__bar i {
    display: block;
    height: 100%;
    width: 0;
    margin: 0;
    font-size: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--fb-gold), var(--fb-gold-lt));
    transition: width .25s ease;
}

/* Khung xem Office (doc/docx/xls/xlsx) */
.fb-office {
    width: min(1080px, 100%);
    height: 100%;
    border: none;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 26px 50px rgba(0, 0, 0, .5);
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
    .doc-block {
        margin: 24px 0;
        border-radius: 14px;
    }

    .doc-block__head {
        padding: 12px 14px;
    }

    .doc-block__title {
        font-size: 11.5px;
        letter-spacing: .8px;
    }

    .doc-block__body {
        padding: 14px;
        gap: 10px;
    }

    /* Xếp dọc để nút bấm đủ rộng cho ngón tay */
    .doc-card {
        flex-wrap: wrap;
        padding: 13px 14px;
        gap: 12px;
    }

    .doc-card__ico {
        width: 42px;
        height: 48px;
        font-size: 18px;
    }

    .doc-card__name {
        font-size: 14px;
    }

    .doc-card__act {
        width: 100%;
        gap: 8px;
    }

    .doc-btn {
        flex: 1;
        justify-content: center;
        padding: 11px 12px;
    }

    .fb-bar {
        padding: 10px 12px;
        gap: 8px;
    }

    .fb-bar__title {
        font-size: 12.5px;
    }

    /* Điều hướng dồn xuống thanh dưới cho dễ bấm bằng ngón cái */
    .fb-bar .fb-ico--nav {
        display: none;
    }

    .fb-stage {
        padding: 10px;
    }

    .fb-foot {
        gap: 10px;
    }

    .fb-counter {
        font-size: 12px;
        min-width: 78px;
    }
}

/* Không in flipbook khi người dùng in bài viết */
@media print {
    .doc-card__act,
    .fb-viewer {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .doc-card,
    .doc-btn,
    .fb-ico {
        transition: none;
    }

    .fb-skel {
        animation: none;
    }
}