:root{--navy:#12355b;--orange:#e45d22;--cream:#f5eee1;--paper:#fffdf8;--ink:#20344b;--muted:#6b7b8e;--line:#ded2bd}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit}

.topbar{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:16px;
  padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));
  background:rgba(18,53,91,.97);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.brand{display:flex;align-items:baseline;gap:6px}
.brand span{font-family:Georgia,serif;font-size:23px;font-weight:900;letter-spacing:2px}
.brand small{font-size:10px;letter-spacing:2px;color:#bcd2e6}
.menu-tabs{display:flex;gap:6px;overflow-x:auto;justify-content:center}
.menu-tabs button{border:0;border-radius:999px;padding:9px 15px;background:transparent;
  color:#d8e5f0;cursor:pointer;font-weight:700;white-space:nowrap}
.menu-tabs button.active{background:var(--orange);color:#fff}

.banner{position:sticky;top:60px;z-index:25;display:flex;align-items:center;justify-content:center;
  gap:16px;padding:11px 16px;background:#fff2cb;border-bottom:1px solid #e6c766;color:#765d16}
.banner button{border:0;border-radius:8px;background:var(--orange);color:#fff;padding:8px 14px;
  font-weight:800;cursor:pointer}

main{max-width:1400px;margin:auto;padding:20px clamp(12px,3vw,40px) 90px}
.empty{color:var(--muted);text-align:center;padding:60px 0}

/* Hàng tiêu đề: tên menu bên trái, chế độ xem căn phải — như bản gốc */
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}
.hero-text{min-width:0}
.eyebrow{margin:0 0 5px;color:var(--orange);font-size:12px;font-weight:850;letter-spacing:2px}
.hero h1{margin:0;font-family:Georgia,serif;font-size:clamp(26px,4vw,44px);color:var(--navy);
  line-height:1.15;overflow-wrap:anywhere}
.hero .meta{margin:8px 0 0;color:var(--muted);font-size:13px}

/* Chuyển chế độ xem — giữ đúng 3 chế độ của bản gốc */
.view-switch{display:flex;padding:4px;width:fit-content;flex:0 0 auto;background:#e8decc;border-radius:999px}
.view-switch button{border:0;border-radius:999px;padding:9px 16px;background:transparent;color:var(--navy);
  cursor:pointer;font-weight:750;white-space:nowrap}
.view-switch button.active{background:var(--paper);box-shadow:0 3px 12px rgba(18,53,91,.12)}

.grid-view{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.page-card{position:relative;padding:0;border:0;border-radius:12px;overflow:hidden;
  background:var(--paper);box-shadow:0 4px 14px rgba(18,53,91,.1);cursor:pointer}
.page-card img{width:100%;height:100%;object-fit:cover;display:block}
.page-card span{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:999px;
  background:rgba(18,53,91,.85);color:#fff;font-size:12px;font-weight:800}

.reader-stage{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:12px}
.page-frame{width:min(100%,820px);margin:auto;background:#fff;
  box-shadow:0 14px 36px rgba(18,53,91,.16);overflow:auto;touch-action:pinch-zoom}
.page-frame img{width:100%;height:auto;display:block}
.nav{width:44px;height:62px;border:0;border-radius:12px;background:var(--navy);color:#fff;
  font-size:34px;cursor:pointer}
.nav:disabled{opacity:.25}
.reader-bar{max-width:820px;margin:14px auto 0;display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.reader-bar button{border:1px solid var(--line);border-radius:8px;background:var(--paper);
  color:var(--navy);padding:9px 13px;font-weight:700;cursor:pointer}

/* Chế độ "Kiểu PDF" — cuộn liên tục */
.pdf-toolbar{position:sticky;top:60px;z-index:10;max-width:850px;margin:0 auto 18px;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,253,248,.94);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 5px 15px rgba(18,53,91,.1)}
.pdf-toolbar button{border:0;border-radius:9px;background:var(--orange);color:#fff;padding:9px 15px;
  font-weight:800;cursor:pointer}
.pdf-pages{display:flex;flex-direction:column;gap:24px;align-items:center}
.scroll-page{width:min(100%,850px);background:#fff;box-shadow:0 8px 24px rgba(18,53,91,.14)}
.scroll-page img{width:100%;height:auto;display:block}

.offline-bar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:10px;
  justify-content:center;align-items:center;padding:10px 12px max(10px,env(safe-area-inset-bottom));
  background:rgba(255,253,248,.96);border-top:1px solid var(--line)}
.offline-bar button{border:0;border-radius:9px;background:var(--navy);color:#fff;padding:10px 16px;
  font-weight:800;cursor:pointer}
.offline-bar a{color:var(--navy);font-weight:700;text-decoration:none}

.toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom));z-index:50;
  transform:translate(-50%,16px);padding:11px 17px;border-radius:10px;background:#142b43;color:#fff;
  opacity:0;pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:760px){
  .reader-stage{grid-template-columns:1fr}
  .nav{position:fixed;bottom:76px;z-index:19;width:42px;height:50px;font-size:30px;
    background:rgba(18,53,91,.9)}
  .nav.prev{left:10px}.nav.next{right:10px}
  .grid-view{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .topbar{grid-template-columns:auto 1fr}
  .menu-tabs{justify-content:flex-end}
  .hero{flex-direction:column;align-items:stretch;gap:14px;margin-bottom:18px}
  .view-switch{width:100%}
  .view-switch button{flex:1;padding:9px 10px;font-size:13px}
  .pdf-toolbar{top:56px;font-size:12px}
}

/* In: chỉ in các trang menu, đúng khổ A4, mỗi trang một tờ */
@media print{
  @page{size:A4;margin:0}
  .topbar,.banner,.view-switch,.pdf-toolbar,.offline-bar,.toast{display:none!important}
  main{padding:0;max-width:none}
  .grid-view,.reader-view{display:none!important}
  .scroll-view{display:block!important}
  .pdf-pages{gap:0}
  .scroll-page{width:210mm;height:297mm;box-shadow:none;break-after:page;page-break-after:always}
  .scroll-page img{width:100%;height:100%;object-fit:contain}
}