/* ===========================
   PRODUCTS PAGE (public)
=========================== */

body.products-page{
    background:#f3f4f6;
    font-family:"Segoe UI",Arial,sans-serif;
    margin:0;
}

.products-topbar{
    background:#111827;
    color:#fff;
    padding:14px 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.products-topbar img{
    height:36px;
    display:block;
}

.products-topbar a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    padding:8px 16px;
    border-radius:8px;
    background:#2563eb;
    transition:0.2s;
}

.products-topbar a:hover{
    background:#1e40af;
}

.products-hero{
    text-align:center;
    padding:40px 20px 20px;
}

.products-hero h1{
    margin:0 0 8px;
    font-size:28px;
    color:#111827;
}

.products-hero p{
    margin:0;
    color:#6b7280;
    font-size:15px;
}

.products-grid{
    max-width:1100px;
    margin:0 auto;
    padding:20px 20px 30px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,300px));
    justify-content:center;
    gap:20px;
}

.product-card{
    background:#fff;
    border-radius:14px;
    padding:22px;
    box-shadow:0 8px 20px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
}

.product-card-icon{
    width:56px;
    height:56px;
    border-radius:12px;
    background:#eff5fc;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:#2563eb;
    overflow:hidden;
    margin:0 auto;
}

.product-card-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.product-card-name{
    font-size:17px;
    font-weight:700;
    color:#111827;
    text-align:center;
}

.product-card-version{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    color:#2563eb;
    background:#eff5fc;
    padding:2px 10px;
    border-radius:20px;
    width:fit-content;
    margin:0 auto;
}

.product-card-desc{
    font-size:13.5px;
    color:#4b5563;
    line-height:1.5;
    flex:1;
    text-align:left;
    width:100%;
    /* Giữ nguyên xuống dòng admin gõ trong ô Mô tả (textarea) ở trang quản trị.
       pre-line: giữ ký tự xuống dòng, vẫn gộp khoảng trắng thừa và tự ngắt dòng
       khi hết bề ngang thẻ. */
    white-space:pre-line;
    overflow-wrap:anywhere;
}

/* Ô chọn phiên bản - chỉ hiện khi sản phẩm có từ 2 bản trở lên */
.product-card-select{
    width:100%;
    padding:7px 10px;
    margin-bottom:8px;
    font-size:13px;
    color:#111827;
    background:#f9fafb;
    border:1px solid #d1d5db;
    border-radius:8px;
    cursor:pointer;
}
.product-card-select:hover{ border-color:#2563eb; }
.product-card-select:focus{
    outline:none;
    border-color:#2563eb;
    box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.product-card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:12.5px;
    color:#6b7280;
}

.product-card-btn{
    margin-top:4px;
    padding:11px;
    border:none;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
}

.product-card-btn:hover{
    background:#1e40af;
}

.products-empty,
.products-loading{
    text-align:center;
    color:#6b7280;
    padding:40px 20px;
    grid-column:1/-1;
}

.products-pagination{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px 60px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.page-btn{
    min-width:36px;
    height:36px;
    padding:0 8px;
    border:1px solid #d1d5db;
    border-radius:8px;
    background:#fff;
    color:#374151;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
}

.page-btn:hover:not(:disabled){
    background:#eff5fc;
    border-color:#2563eb;
    color:#2563eb;
}

.page-btn.active{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}

.page-btn:disabled{
    opacity:0.4;
    cursor:default;
}

@media(max-width:480px){
    .products-topbar{
        padding:12px 16px;
    }
    .products-hero h1{
        font-size:22px;
    }
}

/* ===========================
   MODAL HƯỚNG DẪN TẢI FILE
   Cùng kiểu với modal Điều khoản ở trang Đăng ký (register.css), khác hai chỗ:
   trải kín cửa sổ, và thân modal là ẢNH trang hướng dẫn chứ không nhúng PDF
   (nhúng PDF là trình duyệt kèm theo thanh công cụ + cột ảnh thu nhỏ bên trái).
=========================== */

.guide-modal{
    display:none;                  /* mở bằng cách thêm .active */
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(2px);
    z-index:9999;
    justify-content:center;
    align-items:center;
    padding:0;
}

.guide-modal.active{ display:flex; }

.guide-content{
    background:#fff;

    /* Trải kín cửa sổ trình duyệt. Trang hướng dẫn là khổ A4 ĐỨNG nên ảnh lấy
       trọn chiều cao, phần thừa hai bên để nền xám nhạt cho ra dáng tờ giấy đặt
       trên bàn — kéo ảnh cho đầy bề ngang thì chữ méo hết. */
    width:100vw;
    height:100vh;
    border-radius:0;
    box-shadow:0 25px 60px rgba(0,0,0,0.35);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    animation:guideFadeIn 0.2s ease;
}

.guide-header{
    background:#111827;
    color:#fff;
    padding:12px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    font-weight:600;
    font-size:14.5px;
}

.guide-header .close-btn{
    cursor:pointer;
    font-size:18px;
    line-height:1;
    flex-shrink:0;
}

.guide-body{
    flex:1;
    min-height:0;                  /* thiếu dòng này thì flex con tràn ra ngoài */
    background:#e5e7eb;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
}

.guide-body img{
    width:auto;
    height:100%;
    max-width:100%;
    object-fit:contain;            /* giữ đúng tỉ lệ trang, không kéo méo chữ */
    display:block;
    background:#fff;
    box-shadow:0 6px 24px rgba(0,0,0,0.22);
}

.guide-footer{
    padding:10px 18px;
    border-top:1px solid #eee;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
}

.guide-link{
    color:#2563eb;
    font-size:13px;
    text-decoration:underline;
}

.guide-footer .btn-agree{
    background:#2563eb;
    color:#fff;
    padding:10px 20px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
    transition:0.2s;
}

.guide-footer .btn-agree:hover{ opacity:0.9; }

@keyframes guideFadeIn{
    from{ opacity:0; transform:scale(0.97); }
    to  { opacity:1; transform:scale(1); }
}

/* Điện thoại: màn hẹp mà lấy trọn chiều cao thì trang chỉ còn bằng con tem —
   cho ảnh rộng hết bề ngang rồi cuộn dọc, chữ mới đọc được. */
@media(max-width:768px){

    .guide-modal{ padding:0; }

    .guide-content{
        width:100vw;
        height:100vh;
        border-radius:0;
    }

    /* Điện thoại màn hẹp: ưu tiên bề ngang, cho cuộn dọc để chữ đủ to */
    .guide-body{
        overflow:auto;
        align-items:flex-start;
        padding:0;
    }

    .guide-body img{
        width:100%;
        height:auto;
        max-width:none;
    }

    .guide-header{ font-size:13px; padding:12px 14px; }

    .guide-footer{
        justify-content:center;
    }

    .guide-footer .btn-agree{ width:100%; }
}