/* CSS generated */
@font-face{
    font-family:"Literata";
    src:url("../fonts/Literata-VariableFont_opsz,wght.woff2") format("woff2");
    font-weight:300 900;
    font-style:normal;
    font-display:swap;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Literata",Georgia,serif;background:#f8f8f6;color:#333;font-size:17px;line-height:1.7}
header,main,footer{width:100%;max-width:600px;margin:auto;padding:20px}
header{text-align:center;padding:35px 20px}
header h1{font-size:32px;margin-bottom:15px;color:#2d665d}
header p{font-size:17px;color:#666}
section{margin-bottom:40px}
section h2{font-size:22px;margin-bottom:18px;color:#2d665d}
.book{display:flex;align-items:stretch;gap:18px;background:#fff;border-radius:16px;padding:16px;margin-bottom:22px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
.book-left{width:120px;flex-shrink:0;display:flex;flex-direction:column}
.book-left img{width:100%;aspect-ratio:1/1.414;object-fit:cover;border-radius:8px;display:block}
.progress-wrap{display:flex;align-items:center;gap:8px;margin:12px 0}
.progress{flex:1;height:8px;background:#e6e6e6;border-radius:99px;overflow:hidden}
.progress-bar{width:0;height:100%;background:#3d8c73;transition:width .25s}
.progress-percent{width:36px;font-size:13px;text-align:right;color:#666;flex-shrink:0}
.book-left a{display:block;margin-top:auto;width:100%;padding:10px;text-align:center;text-decoration:none;background:#2d665d;color:#fff;border-radius:8px;font-size:14px}
.book-left a:hover{background:#224f49}
.book-right{flex:1;min-width:0}
.book-right h3{font-size:20px;line-height:1.4;margin-bottom:10px;color:#222}
.book-right p{font-size:17px;color:#555}
.info-section{background:#fff;border-radius:14px;padding:20px;box-shadow:0 2px 10px rgba(0,0,0,.05)}
footer{text-align:center;color:#666;font-size:15px;padding-bottom:40px}
footer hr{border:none;border-top:1px solid #ddd;margin-bottom:20px}
footer a{color:#2d665d;text-decoration:none}
footer a:hover{text-decoration:underline}
@media(max-width:420px){
    header,main,footer{padding:18px}
    .book{gap:14px}
    .book-left{width:105px}
    .book-right h3{font-size:20px}
}

/* mở đầu*/
.intro {
    max-width: 600px;
    margin: 18px auto 30px;
    padding: 0 18px;
    text-align: center;
    color: #555;
    line-height: 1.8;
}

.intro strong {
    color: #348C90;
}

.intro-tags {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.intro-tags span {
    background: #eef7f7;
    color: #348C90;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
}

/* share*/
.btn-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 10px 18px;

    background: #348C90;
    color: #fff;

    border: none;
    border-radius: 999px;

    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;

    cursor: pointer;
    transition: .25s;
}

.btn-share:hover {
    background: #2d7b7e;
    transform: translateY(-1px);
}

.btn-share:active {
    transform: translateY(0);
}

.share-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.share-button-wrapper {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


/* hướng dẫn cài đặt*/
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    border: 1px solid #348C90;
    border-radius: 999px;

    background: transparent;
    color: #348C90;

    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;

    transition: .2s;
}

.btn-secondary:hover {
    background: rgba(52, 140, 144, .08);
}
.install-button-wrapper {
    text-align: center;
    margin: 18px 0;
}
section ol {
    padding-left: 1.5rem;
    margin-top: 1rem;
}

section li {
    margin-bottom: 0.75rem;
}

/* Nút quay về thư viện */
.btn-back {
    display: inline-block;
    padding: 12px 22px;
    border-radius: 8px;
    background: #2d665d;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background .2s;
}

.btn-back:hover {
    background: #224f49;
    text-decoration: none;
}

/* =========================
   POPUP HƯỚNG DẪN
========================= */

.popup-overlay{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:2000;

}

.popup-overlay.show{

    opacity:1;
    visibility:visible;

}

.popup{

    position:relative;

    width:100%;
    max-width:420px;

    background:#fff;

    border-radius:16px;

    padding:26px 22px;

    box-shadow:0 12px 32px rgba(0,0,0,.18);

    animation: popupIn .25s ease both;

}

.popup h2{

    margin-bottom:18px;

    text-align:center;

    color:#2d665d;

}

.popup-close{

    position:absolute;

    top:12px;
    right:12px;

    width:36px;
    height:36px;

    border:none;
    border-radius:50%;

    background:#f2f2f2;

    font-size:18px;

    cursor:pointer;

}

.popup-close:hover{

    background:#e6e6e6;

}

#guideContent{

    color:#555;
    line-height:1.8;

}

#guideContent ol{

    padding-left:22px;

}

#guideContent li{

    margin-bottom:12px;

}

@keyframes popupIn{

    from{

        opacity:0;
        transform:translateY(16px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

.install-button{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-width:220px;

    padding:14px 26px;

    border:none;
    border-radius:12px;

    background:#2d665d;
    color:#fff;

    font-size:16px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;

}