:root{
    --bg:#2b2b2b;
    --panel:#1f1f1f;
    --border:#444;
    --hover:#555;
    --blue:#4da3ff;
}

*{box-sizing:border-box}

body{
    margin:0;
    background:var(--bg);
    font-family:'Segoe UI', Tahoma, sans-serif;
    color:#fff;
}

/* TOOLBAR */
.toolbar{
    height:48px;
    background:#3c3c3c;
    display:flex;
    align-items:center;
    padding:0 12px;
    border-bottom:1px solid #2a2a2a;
    font-size:14px;
}

.tb-left,.tb-center,.tb-right{
    display:flex;
    align-items:center;
    gap:8px;
}

.tb-left{flex:1;min-width:0}
.tb-center{flex:0}
.tb-right{flex:1;justify-content:flex-end}

.toolbar .title{
    max-width:420px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.toolbar button,
.toolbar a,
.icon{
    background:none;
    border:0;
    color:#fff;
    cursor:pointer;
    padding:4px 6px;
    border-radius:4px;
    text-decoration:none;
}

.toolbar button:hover,
.toolbar a:hover,
.icon:hover{
    background:var(--hover);
}

#zoomText{
    min-width:48px;
    text-align:center;
}

/* VIEWER */
.viewer{
    display:flex;
    height:calc(100vh - 48px);
}

/* THUMBS */
.toolbar{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 48px;
    z-index: 1000;
    background: #3c3c3c;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-bottom: 1px solid #2a2a2a;
}
.thumbs{
    position: fixed;
    top: 48px;
    left: 0;
    bottom: 0;

    width: 150px;
    background: var(--panel);
    border-right: 1px solid var(--border);
    overflow-y: auto;

    padding: 30px 40px;   /* 👈 theo yêu cầu */
}

.thumbs img{
    width:100%;
	height: auto;
    margin-bottom:8px;
    border:2px solid transparent;
    cursor:pointer;
    background:#fff;
	
}

.thumbs img.active{
    border-color:var(--blue);
}

/* MAIN */
.main{
    flex:1;
    overflow-y:auto;
    padding:24px;
    display:flex;
    justify-content:center;
}

.pages{
    max-width:900px;
    width:100%;
    transform-origin:top center;
}

.pages img{
    width:100%;
    height: auto;
    margin-bottom:24px;
    background:#fff;
    box-shadow:0 0 10px #000;
    width:100%;
    height:auto;
	scroll-margin-top: 64px;
}


/* MOBILE */
@media(max-width:1200px){
    .viewer{flex-direction:column}
    .thumbs{ display:none; }
    .main{ margin-left:0; }
}
#pageText{
    min-width: 56px;      /* QUAN TRỌNG */
    text-align: center;
    font-variant-numeric: tabular-nums;
    opacity: .9;
}

.tb-icon{
    width:32px;
    height:32px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
    background:none;
    border:0;
    cursor:pointer;
    padding:0;
}

.tb-icon:hover{
    background:#555;
}

/* SVG inside icon */
.tb-icon svg{
    width:20px;
    height:20px;
    fill:#fff;
    opacity:.9;
}

.tb-icon:hover svg{
    opacity:1;
}
.ads-top{
    min-height:90px; /* FIX CLS */
    margin:8px 0;
}
.desc{
	background-color:#fff;
	color:#000;
	padding:50px
}