:root{--navy:#071b52;--blue:#0a5fb8;--cyan:#22d3ff;--green:#79d700;--gold:#ffd45a;--white:#fff;--glass:rgba(255,255,255,.12);--shadow:0 24px 80px rgba(0,0,0,.34)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,"Helvetica Neue",sans-serif;color:#fff;background:radial-gradient(circle at 20% 0,#0b65c5 0,#071b52 42%,#041238 100%);overflow-x:hidden}.bg-grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(34,211,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(34,211,255,.06) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at center,#000 0,transparent 72%);opacity:.6}.topbar{position:fixed;top:0;left:0;right:0;z-index:20;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 42px;background:rgba(3,14,46,.62);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12)}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:.4px}.brand img{width:48px;height:48px;object-fit:contain}.topbar nav{display:flex;gap:24px}.topbar nav a{color:#dff7ff;text-decoration:none;font-weight:700;font-size:15px}.section{position:relative;padding:110px 7vw}.hero{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;padding-top:118px}.hero-light{position:absolute;inset:-20% -20% auto auto;width:70vw;height:70vw;background:radial-gradient(circle,rgba(34,211,255,.35),transparent 58%);filter:blur(20px)}.orb{position:absolute;border:1px solid rgba(34,211,255,.45);border-radius:50%;box-shadow:0 0 45px rgba(34,211,255,.25);animation:spin 18s linear infinite}.orb-1{width:520px;height:150px;right:9vw;top:26vh;transform:rotate(-12deg)}.orb-2{width:720px;height:180px;right:1vw;bottom:17vh;transform:rotate(7deg);animation-duration:25s}@keyframes spin{to{filter:hue-rotate(90deg)}}.logo-wrap img{width:126px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.35))}.eyebrow{color:#dff7ff;text-transform:uppercase;letter-spacing:1.2px;font-size:14px;font-weight:800}.hero h1{margin:18px 0 12px;font-size:clamp(38px,5.4vw,82px);line-height:1.02;text-shadow:0 8px 20px rgba(0,0,0,.36)}.hero h1 span{background:linear-gradient(90deg,#fff,#a8f0ff,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}.slogan{font-size:clamp(24px,3.2vw,48px);font-weight:900;color:var(--gold);text-shadow:0 0 18px rgba(255,212,90,.35);margin:0}.anniversary{font-size:20px;color:#e8fbff;font-weight:700}.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:999px;border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;font-weight:900;background:rgba(255,255,255,.1);box-shadow:0 0 24px rgba(34,211,255,.12);transition:.25s}.btn:hover{transform:translateY(-3px);box-shadow:0 0 32px rgba(34,211,255,.36)}.btn.primary{background:linear-gradient(135deg,#00a7ff,#0b62c6);border-color:#91f0ff}.btn.ghost{background:rgba(255,255,255,.06)}.book-stage{position:relative}.book-img{width:100%;border-radius:24px;box-shadow:var(--shadow),0 0 90px rgba(34,211,255,.35);animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-14px)}}.section-title{max-width:920px;margin-bottom:32px}.section-title.center{text-align:center;margin-left:auto;margin-right:auto}.section-title p{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:1.5px}.section-title h2{font-size:clamp(30px,4vw,56px);margin:0}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}.glass-card{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.intro-text{padding:34px;font-size:19px;line-height:1.7;color:#edfaff}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.stats div{padding:18px;border-radius:18px;background:rgba(0,167,255,.16);border:1px solid rgba(34,211,255,.22);text-align:center}.stats strong{display:block;font-size:28px;color:#fff}.stats span{color:#c7f5ff}.photo-card{margin:0;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);min-height:360px}.photo-card img{width:100%;height:100%;object-fit:cover}.video-shell{max-width:1100px;margin:auto;border-radius:28px;padding:14px;background:linear-gradient(135deg,rgba(34,211,255,.25),rgba(255,255,255,.06));box-shadow:var(--shadow)}.video-placeholder,.video-shell iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:20px;background:linear-gradient(rgba(3,14,46,.5),rgba(3,14,46,.75)),url('img/video-frame-ref.png') center/cover;color:#fff;display:grid;place-items:center;text-align:center}.play{display:inline-grid;place-items:center;width:88px;height:88px;border-radius:50%;background:rgba(34,211,255,.22);border:1px solid rgba(255,255,255,.35);font-size:34px;margin-bottom:14px}.flip-section{background:linear-gradient(180deg,transparent,rgba(0,0,0,.18),transparent)}.flip-toolbar{max-width:1200px;margin:0 auto 18px;display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.flip-toolbar button{cursor:pointer;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:#fff;border-radius:12px;padding:10px 14px;font-weight:800}.flip-toolbar span{padding:10px 16px;color:#dff7ff}.book-viewer{max-width:1200px;min-height:620px;margin:auto;border-radius:28px;background:radial-gradient(circle at center,rgba(34,211,255,.17),rgba(0,0,0,.32));border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;gap:18px;padding:28px;position:relative;overflow:hidden}.book-viewer canvas{max-width:48%;height:auto;background:#fff;border-radius:12px;box-shadow:0 18px 38px rgba(0,0,0,.42);display:none}.book-loading{text-align:center;max-width:620px;color:#eafcff}.note{text-align:center;color:#bdefff;max-width:900px;margin:18px auto 0}.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1150px;margin:auto}.tile{position:relative;border-radius:24px;overflow:hidden;min-height:420px;box-shadow:var(--shadow);background:#0b235f}.tile img{width:100%;height:100%;object-fit:cover;display:block}.tile span{position:absolute;left:18px;bottom:18px;background:rgba(3,14,46,.78);padding:12px 16px;border-radius:999px;font-weight:900}.download-card{max-width:1050px;margin:auto;border-radius:30px;padding:38px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(34,211,255,.09));border:1px solid rgba(255,255,255,.2);box-shadow:var(--shadow)}.download h2{font-size:42px;margin:0 0 8px}footer{text-align:center;padding:50px 24px 70px;background:rgba(0,0,0,.25);color:#dff7ff}footer img{width:74px}@media(max-width:900px){.topbar{padding:0 18px}.topbar nav{display:none}.hero{grid-template-columns:1fr;text-align:center}.book-stage{order:-1;margin-top:18px}.intro-grid,.gallery-grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr}.section{padding:86px 20px}.book-viewer{min-height:520px;padding:14px;gap:8px}.book-viewer canvas{max-width:49%}.download-card{flex-direction:column;text-align:center}.hero .cta-row{justify-content:center}}.reveal{opacity:0;transform:translateY(24px);transition:opacity .75s ease, transform .75s ease}.reveal.show{opacity:1;transform:translateY(0)}

/* ====== BẢN CHỈNH 25/06: rõ logo, chuẩn font tiếng Việt, bỏ chi tiết số trên ảnh ====== */
body,
button,
a,
input,
textarea{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,Tahoma,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
.brand{
  font-family:"Segoe UI",Arial,Tahoma,sans-serif;
  font-weight:900;
  letter-spacing:.2px;
}
.brand img{
  background:rgba(255,255,255,.96);
  border-radius:50%;
  padding:4px;
  box-shadow:0 0 0 2px rgba(126,226,255,.35),0 0 22px rgba(34,211,255,.65);
}
.logo-wrap{
  width:150px;
  height:150px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:radial-gradient(circle,#fff 0 58%,rgba(255,255,255,.9) 59%,rgba(34,211,255,.08) 72%);
  box-shadow:0 0 0 2px rgba(255,255,255,.65),0 0 34px rgba(34,211,255,.8),0 18px 28px rgba(0,0,0,.3);
  position:relative;
  margin-bottom:18px;
}
.logo-wrap:before,
.logo-wrap:after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:1px solid rgba(121,215,0,.65);
  animation:logoPulse 3.8s ease-in-out infinite;
}
.logo-wrap:after{inset:-20px;border-color:rgba(34,211,255,.45);animation-delay:1.1s}
.logo-wrap img{
  width:128px;
  height:128px;
  object-fit:contain;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.22));
  position:relative;
  z-index:1;
}
@keyframes logoPulse{50%{transform:scale(1.05);opacity:.45}}
.hero h1{
  font-family:"Segoe UI",Arial,Tahoma,sans-serif;
  font-weight:950;
  letter-spacing:-1.2px;
}
.hero h1 span{
  background:linear-gradient(90deg,#ffffff 0%,#c8f7ff 45%,#ffffff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
}
.slogan{
  font-family:"Segoe UI",Arial,Tahoma,sans-serif;
  line-height:1.32;
  letter-spacing:-.2px;
}
.eyebrow,.anniversary,.btn,.topbar nav a{
  font-family:"Segoe UI",Arial,Tahoma,sans-serif;
}
.book-img{
  object-fit:cover;
}
@media(max-width:900px){
  .logo-wrap{margin-left:auto;margin-right:auto;width:128px;height:128px}.logo-wrap img{width:108px;height:108px}
  .hero h1{letter-spacing:-.6px}
}

/* ====== BẢN CHỈNH HERO/TRANG CHỦ 25/06 - bố cục chính thức ====== */
.official-topbar{
  height:82px;
  justify-content:center;
  padding:0 42px;
}
.official-brand{
  position:absolute;
  left:42px;
  right:360px;
  justify-content:flex-start;
  min-width:0;
}
.official-brand span{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:15px;
  line-height:1.25;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.official-topbar nav{
  position:absolute;
  right:42px;
}
.hero{
  padding-top:128px;
  grid-template-columns:1fr .95fr;
}
.hero-content{
  max-width:780px;
}
.hero-agency{
  max-width:100%;
  white-space:nowrap;
  font-size:15px;
  letter-spacing:1.1px;
  color:#ecfbff;
  text-shadow:0 2px 12px rgba(0,0,0,.36);
}
.hero-title{
  margin:20px 0 18px;
  line-height:.95;
  text-transform:uppercase;
}
.hero-title .title-line{
  display:block;
  white-space:nowrap;
}
.hero-title .title-main{
  font-size:clamp(42px,4.8vw,74px);
  color:#fff;
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.42));
}
.hero-title .title-ward{
  margin-top:14px;
  font-size:clamp(44px,5.1vw,78px);
  background:linear-gradient(180deg,#ffffff 5%,#d5fbff 48%,#b5ecff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.45));
}
.slogan{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:8px 0 0;
}
.slogan span{
  font-size:clamp(26px,3vw,46px);
  font-weight:900;
  color:var(--gold);
  text-shadow:0 0 18px rgba(255,212,90,.28);
}
.slogan strong{
  font-size:clamp(25px,2.7vw,40px);
  line-height:1.05;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 4px 16px rgba(0,0,0,.35),0 0 20px rgba(34,211,255,.25);
}
.book-stage{
  transform:translateY(8px);
}
.book-img{
  width:min(100%,760px);
  display:block;
  margin-left:auto;
}
.cta-row .btn{
  min-width:170px;
}
@media(max-width:1180px){
  .official-brand span{font-size:13px}
  .official-brand{right:300px}
  .hero-title .title-main{font-size:clamp(38px,4.2vw,62px)}
  .hero-title .title-ward{font-size:clamp(40px,4.5vw,66px)}
}
@media(max-width:900px){
  .official-topbar{height:74px;justify-content:flex-start;padding:0 16px}
  .official-brand{position:static;right:auto;left:auto;max-width:calc(100vw - 32px)}
  .official-brand span{font-size:11px;white-space:normal;line-height:1.2}
  .official-topbar nav{display:none}
  .hero{padding-top:110px;text-align:center}
  .hero-content{max-width:100%}
  .hero-agency{white-space:normal;font-size:12px;line-height:1.35}
  .hero-title .title-line{white-space:normal}
  .slogan{align-items:center}
  .book-img{margin:auto;max-width:92vw}
  .cta-row .btn{min-width:unset}
}
@media(max-width:520px){
  .hero-title .title-main{font-size:36px;line-height:1.05}
  .hero-title .title-ward{font-size:38px;line-height:1.05}
  .slogan span{font-size:27px}
  .slogan strong{font-size:25px}
}

/* Flipbook 1.1 - page turn effect */
.flip-toolbar button:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}.book-viewer{perspective:2400px;transform-style:preserve-3d}.book-viewer.pdf-ready:before{content:"";position:absolute;width:min(22px,2vw);height:86%;left:50%;top:7%;transform:translateX(-50%);background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.18),rgba(0,0,0,.28));border-radius:999px;z-index:3;box-shadow:0 0 32px rgba(34,211,255,.15)}.book-viewer.pdf-ready:after{content:"";position:absolute;inset:auto 8% 18px 8%;height:40px;background:radial-gradient(ellipse at center,rgba(0,0,0,.38),transparent 70%);filter:blur(10px);pointer-events:none}.book-viewer canvas{transform-origin:center;transition:filter .25s ease, transform .25s ease}.book-viewer.pdf-ready canvas:first-of-type{transform-origin:right center}.book-viewer.pdf-ready canvas:last-of-type{transform-origin:left center}.book-viewer.is-rendering canvas{filter:brightness(.88) blur(.2px)}.flip-ghost{position:absolute;top:50%;width:auto;max-width:48%;height:auto;max-height:calc(100% - 56px);background:#fff;border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.55);z-index:9;backface-visibility:hidden;pointer-events:none}.flip-next{right:calc(50% + 9px);transform-origin:right center;animation:pageTurnNext .62s ease-in-out forwards}.flip-prev{left:calc(50% + 9px);transform-origin:left center;animation:pageTurnPrev .62s ease-in-out forwards}.turning-next #rightPage{filter:brightness(.7);transform:rotateY(-8deg)}.turning-prev #leftPage{filter:brightness(.7);transform:rotateY(8deg)}@keyframes pageTurnNext{0%{transform:translateY(-50%) rotateY(0deg);filter:brightness(1)}45%{filter:brightness(.72)}100%{transform:translateY(-50%) rotateY(-178deg);filter:brightness(.92)}}@keyframes pageTurnPrev{0%{transform:translateY(-50%) rotateY(0deg);filter:brightness(1)}45%{filter:brightness(.72)}100%{transform:translateY(-50%) rotateY(178deg);filter:brightness(.92)}}@media(max-width:900px){.flip-ghost{max-width:49%;max-height:calc(100% - 28px)}.flip-next{right:calc(50% + 4px)}.flip-prev{left:calc(50% + 4px)}}

/* ====== FLIPBOOK HTML5 2.0 - dùng ảnh trang nén, tải nhanh hơn PDF lớn ====== */
.book-viewer.image-ready{
  min-height:720px;
  gap:0;
  padding:38px;
  background:
    radial-gradient(circle at 50% 35%,rgba(34,211,255,.28),rgba(4,18,56,.76) 42%,rgba(2,8,30,.92) 100%),
    linear-gradient(135deg,rgba(255,255,255,.07),rgba(34,211,255,.08));
  overflow:auto;
}
.book-viewer.image-ready:before{
  content:"";
  position:absolute;
  width:24px;
  height:86%;
  left:50%;top:7%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.28),rgba(0,0,0,.36));
  border-radius:999px;
  z-index:4;
  box-shadow:0 0 40px rgba(34,211,255,.22);
  pointer-events:none;
}
.book-viewer.image-ready:after{
  content:"";
  position:absolute;
  inset:auto 7% 20px 7%;
  height:44px;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.45),transparent 70%);
  filter:blur(12px);
  pointer-events:none;
}
.book-page{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:min(49%,560px);
  transform:scale(var(--book-zoom,1));
  transition:transform .25s ease, filter .25s ease;
  transform-origin:center center;
}
.book-page img{
  width:100%;
  max-height:76vh;
  object-fit:contain;
  display:block;
  background:#fff;
  border-radius:10px;
  box-shadow:0 20px 50px rgba(0,0,0,.46), inset 0 0 0 1px rgba(0,0,0,.08);
  user-select:none;
  -webkit-user-drag:none;
}
#leftPage{transform-origin:right center}
#rightPage{transform-origin:left center}
.page-empty{
  width:100%;min-height:560px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);
  color:#123; border-radius:10px; font-weight:900;
}
.page-ghost{
  position:absolute;
  top:50%;
  width:min(49%,560px);
  z-index:9;
  pointer-events:none;
  transform-style:preserve-3d;
  backface-visibility:hidden;
}
.page-ghost img{width:100%;max-height:76vh;object-fit:contain;border-radius:10px;box-shadow:0 26px 70px rgba(0,0,0,.62)}
.ghost-next{right:calc(50% - 560px);transform-origin:left center;animation:htmlFlipNext .62s ease-in-out forwards}
.ghost-prev{left:calc(50% - 560px);transform-origin:right center;animation:htmlFlipPrev .62s ease-in-out forwards}
.turning-next #rightPage,.turning-prev #leftPage{filter:brightness(.72) blur(.2px)}
@keyframes htmlFlipNext{
  0%{transform:translateY(-50%) rotateY(0deg);filter:brightness(1)}
  50%{filter:brightness(.72)}
  100%{transform:translateY(-50%) rotateY(-176deg);filter:brightness(.95)}
}
@keyframes htmlFlipPrev{
  0%{transform:translateY(-50%) rotateY(0deg);filter:brightness(1)}
  50%{filter:brightness(.72)}
  100%{transform:translateY(-50%) rotateY(176deg);filter:brightness(.95)}
}
.page-flash .book-page{filter:drop-shadow(0 0 18px rgba(34,211,255,.45))}
.flip-toolbar button:not(:disabled):hover{background:rgba(34,211,255,.18);box-shadow:0 0 20px rgba(34,211,255,.24)}
@media(max-width:1240px){.ghost-next{right:25px}.ghost-prev{left:25px}}
@media(max-width:760px){
  .book-viewer.image-ready{min-height:620px;padding:18px;overflow:auto}
  .book-viewer.image-ready:before{display:none}
  .book-page{width:min(96%,520px);transform-origin:center center}
  .book-page img{max-height:78vh}
  .page-ghost{width:min(92%,520px);left:4%!important;right:auto!important;transform-origin:center center}
  .ghost-next{animation:mobileFlipNext .55s ease-in-out forwards}.ghost-prev{animation:mobileFlipPrev .55s ease-in-out forwards}
  @keyframes mobileFlipNext{to{transform:translateY(-50%) translateX(-30px) rotateY(-75deg);opacity:0}}
  @keyframes mobileFlipPrev{to{transform:translateY(-50%) translateX(30px) rotateY(75deg);opacity:0}}
}