.ahobook-wrapper {
    position: relative; width: 100%; max-width: 800px; margin: 20px auto;
    background: #fff; border: 1px solid #ccc; border-radius: 6px;
    display: flex; flex-direction: column; height: 600px;
    font-family: 'Georgia', serif;
    /* Ngăn trình duyệt can thiệp thao tác vuốt ngang */
    touch-action: pan-y; 
}
.ahobook-wrapper * { box-sizing: border-box; }
.ahobook-wrapper.is-fullscreen {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%;
    max-width: none; margin: 0; z-index: 99999; border: none; border-radius: 0;
}

/* Toolbar */
.ahobook-toolbar {
    height: 40px; background: #333; color: #fff; display: flex;
    justify-content: space-between; align-items: center; padding: 0 10px; flex-shrink: 0;
}
.ahobook-title { font-size: 14px; font-weight: bold; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 50%; }
.ahobook-btn { background: #555; color: #fff; border: 1px solid #666; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 12px; }

/* Viewport */
.ahobook-viewport {
    flex-grow: 1; position: relative; overflow: hidden; background: #fdfdfd; padding: 20px 40px;
}
.ahobook-page-content {
    height: 100%; width: 100%; overflow: hidden;
    font-size: 18px; line-height: 1.6; text-align: justify; color: #333;
    /* Hiệu ứng mờ khi chuyển trang */
    transition: opacity 0.15s ease-out;
}
.ahobook-page-content p { margin-bottom: 1em; }
.ahobook-page-content img { max-width: 100%; height: auto; display: block; margin: 10px auto; }

/* Zones - Chỉ hiện trên Desktop */
.ahobook-zone { position: absolute; top: 0; bottom: 0; width: 15%; z-index: 10; cursor: pointer; }
.zone-prev { left: 0; }
.zone-next { right: 0; }
/* Khi hover zone trên PC thì hiện mũi tên mờ (tùy chọn) */
.ahobook-zone:hover { background: rgba(0,0,0,0.02); }

/* Footer */
.ahobook-footer {
    height: 50px; background: #eee; border-top: 1px solid #ddd;
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px; flex-shrink: 0;
}
.ahobook-nav-btn { background: #333; color: white; border: none; padding: 6px 16px; border-radius: 20px; cursor: pointer; }
.ahobook-nav-btn:disabled { background: #ccc; cursor: not-allowed; }
.ahobook-pagination { font-weight: bold; color: #555; display: flex; align-items: center; gap: 5px; }
.ahobook-pagination input.ahobook-page-input {
    width: 60px; text-align: center; padding: 4px; border: 1px solid #ccc; border-radius: 4px;
}

/* Popup */
.ahobook-resume-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7);
    z-index: 100; display: flex; justify-content: center; align-items: center;
}
.ahobook-resume-box {
    background: #fff; padding: 20px; border-radius: 8px; text-align: center; max-width: 80%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.ahobook-resume-actions { margin-top: 15px; display: flex; justify-content: center; gap: 10px; }
.resume-btn { padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.resume-yes { background: #28a745; color: white; }
.resume-no { background: #dc3545; color: white; }

/* Mobile Optimizations */
@media (max-width: 768px) {
    .ahobook-wrapper { height: 80vh; margin: 10px auto; }
    .ahobook-viewport { padding: 15px 20px; } /* Padding nhỏ hơn cho mobile */
    .ahobook-page-content { font-size: 16px; }
    
    /* ẨN CLICK ZONES TRÊN MOBILE ĐỂ DÙNG SWIPE */
    .ahobook-zone { display: none; }
}