*{box-sizing:border-box;}
:root{--kyyeu-accent:#1F1F1D; --kyyeu-heading-font:'Philosopher','Marcellus',serif; --kyyeu-heading-scale:1;}
html{background:#F7F6F3;}
body{margin:0; background:var(--kyyeu-bg,#F7F6F3); color:#26262A; font-family:'Literata',serif; line-height:1.75; overflow-x:hidden;}
.wrap{max-width:760px; margin:0 auto; position:relative; z-index:2;}
@media (prefers-reduced-motion: reduce){ *{transition-duration:.001s !important;} }

.gallery-spotlight{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(420px circle at 50% 30%, rgba(0,0,0,0), rgba(0,0,0,.05) 60%, rgba(0,0,0,.09));
  transition:background .25s ease;
}

/* BẢNG THÔNG TIN TRIỂN LÃM */
.cover{padding:70px 24px 30px; text-align:center; position:relative; z-index:2;}
.museum-plate{max-width:520px; margin:0 auto;}
.plate-line{height:1px; background:#26262A; opacity:.25;}
.eyebrow{font-size:10.5px; letter-spacing:.35em; color:#7A7A72; margin:22px 0 16px;}
.cover h1{font-family:var(--kyyeu-heading-font); font-size:calc(46px * var(--kyyeu-heading-scale)); margin:0 0 6px; color:var(--kyyeu-accent); letter-spacing:.01em; line-height:1.1;}
.exhibit-sub{margin:0 0 26px; font-size:14px; color:#6E6E66; font-style:italic;}
.plate-meta{display:flex; justify-content:center; gap:40px; margin-bottom:22px; flex-wrap:wrap;}
.plate-meta span{display:block; font-size:9.5px; letter-spacing:.2em; color:#9A9A90;}
.plate-meta strong{display:block; font-family:var(--kyyeu-heading-font); font-size:20px; color:#26262A; margin-top:4px; font-weight:400;}

.section{padding:60px 24px 8px; position:relative; z-index:2;}
.section-head{text-align:center; margin-bottom:34px;}
.section h2{font-family:var(--kyyeu-heading-font); font-size:calc(27px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 6px; letter-spacing:.02em;}
.section .sub{font-size:12.5px; color:#8A8A80; letter-spacing:.02em;}

/* LỜI GIÁM TUYỂN */
.curator-note{max-width:540px; margin:0 auto; padding:32px 34px; background:#fff; border:1px solid #E4E2DC;}
.curator-label{display:block; font-size:9.5px; letter-spacing:.3em; color:#9A9A90; margin-bottom:14px;}
.curator-note p{margin:0 0 14px; font-size:16px; line-height:1.85; color:#3A3A34;}
.curator-note cite{font-family:var(--kyyeu-heading-font); font-style:normal; font-size:13.5px; color:#7A7A72;}

/* TÁC PHẨM TRUNG TÂM */
.masterpiece{margin:0; max-width:560px; margin:0 auto; text-align:center;}
.masterpiece-frame{
  background:#fff; padding:22px; border:1px solid #DCD9D0;
  box-shadow:0 26px 50px rgba(38,38,42,.13);
}
.masterpiece-frame img{width:100%; height:auto; max-height:440px; object-fit:cover; display:block;}
.art-plaque{text-align:left; padding:16px 2px 0; max-width:340px;}
.masterpiece .art-plaque{margin:22px auto 0; text-align:center; max-width:420px;}
.plaque-title{display:block; font-family:var(--kyyeu-heading-font); font-size:17px; color:#26262A;}
.plaque-medium{display:block; font-size:12px; color:#8A8A80; font-style:italic; margin-top:4px;}
.plaque-desc{display:block; font-size:13.5px; color:#5A5A52; margin-top:10px; line-height:1.7;}
.plaque-no{display:block; font-size:10px; letter-spacing:.2em; color:#A8A89E; margin-bottom:4px;}

/* TƯỜNG TRƯNG BÀY */
.gallery-wall{display:grid; grid-template-columns:repeat(2,1fr); gap:44px 34px;}
.artwork{margin:0;}
.artwork-frame{
  background:#fff; padding:14px; border:1px solid #DCD9D0;
  box-shadow:0 14px 30px rgba(38,38,42,.09);
  transition:box-shadow .35s ease, transform .35s ease;
}
.artwork:hover .artwork-frame{box-shadow:0 22px 44px rgba(38,38,42,.18); transform:translateY(-4px);}
.artwork-frame img{width:100%; height:200px; object-fit:cover; display:block;}
.art-plaque.small{padding-top:14px;}
.art-plaque.small .plaque-title{font-size:14.5px;}
@media(max-width:560px){.gallery-wall{grid-template-columns:1fr; gap:36px;} .artwork-frame img{height:230px;}}

.see-full{text-align:center; margin:44px 0 0;}
.see-full a{font-family:var(--kyyeu-heading-font); font-size:14.5px; color:var(--kyyeu-accent); text-decoration:none; border-bottom:1px solid #B8B5AC; padding-bottom:3px; letter-spacing:.02em;}

/* SƠ ĐỒ PHÒNG */
.floorplan{max-width:520px; margin:0 auto;}
.room{display:flex; gap:20px; align-items:flex-start; padding:20px 0; border-bottom:1px solid #E4E2DC;}
.room:last-child{border-bottom:none;}
.room-no{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--kyyeu-accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  font-family:var(--kyyeu-heading-font); font-size:14px; color:var(--kyyeu-accent);
}
.room-info strong{display:block; font-family:var(--kyyeu-heading-font); font-size:16.5px; color:#26262A; margin-bottom:3px;}
.room-info span{font-size:13.5px; color:#6E6E66;}

/* SỔ LƯU NIỆM */
.guestbook{max-width:540px; margin:0 auto; columns:2; column-gap:22px;}
.guest-entry{break-inside:avoid; background:#fff; border:1px solid #E4E2DC; padding:18px 20px; margin-bottom:22px;}
.guest-entry p{margin:0 0 10px; font-size:14px; color:#3A3A34; line-height:1.7;}
.guest-entry cite{font-family:var(--kyyeu-heading-font); font-style:normal; font-size:13px; color:#8A8A80;}
@media(max-width:560px){.guestbook{columns:1;}}

.share{margin:66px 24px 30px; padding:44px 28px; text-align:center; background:#1F1F1D; color:#F7F6F3;}
.share h2{font-family:var(--kyyeu-heading-font); font-size:25px; margin:0 0 8px; letter-spacing:.02em;}
.share p{font-size:13px; margin:0 0 22px; color:#A8A89E;}
#qrcode{background:#fff; display:inline-block; padding:9px; margin-bottom:18px;}
.link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:12.5px;}
.link-row code{background:rgba(247,246,243,.09); padding:7px 13px; letter-spacing:.02em;}
.link-row button{background:#F7F6F3; color:#1F1F1D; border:none; padding:7px 15px; font-size:12px; font-weight:700; cursor:pointer; letter-spacing:.04em;}

.foot{text-align:center; font-size:11.5px; color:#9A9A90; padding:0 20px 44px; letter-spacing:.03em; position:relative; z-index:2;}

/* ============ HIỆU ỨNG ĐỘNG ============ */

/* 1. THANH TIẾN TRÌNH THAM QUAN */
.tour-progress{position:fixed; top:0; left:0; right:0; height:3px; background:rgba(31,31,29,.08); z-index:60;}
.tour-fill{height:100%; width:0%; background:var(--kyyeu-accent); transition:width .12s linear;}
.tour-counter{
  position:fixed; right:20px; bottom:22px; z-index:60;
  background:#1F1F1D; color:#F7F6F3; padding:9px 15px; border-radius:2px;
  font-size:11px; letter-spacing:.14em; opacity:0; transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease;
}
.tour-counter.show{opacity:.94; transform:translateY(0);}
.tour-counter strong{font-family:var(--kyyeu-heading-font); font-size:15px; color:#C9A961;}

/* 2. TÁC PHẨM HIỆN DẦN + ĐUNG ĐƯA NHẸ NHƯ ĐANG TREO */
.artwork{opacity:0; transform:translateY(26px);}
.artwork.hung{opacity:1; transform:translateY(0); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.8,.3,1);}
.artwork.hung .artwork-frame{animation:hangSway 7s ease-in-out infinite;}
.artwork:nth-child(2n).hung .artwork-frame{animation-delay:-2.4s;}
.artwork:nth-child(3n).hung .artwork-frame{animation-delay:-4.1s;}
@keyframes hangSway{0%,100%{transform:rotate(-.35deg);} 50%{transform:rotate(.35deg);}}

/* 3. ĐÈN RỌI SÁNG LÊN TỪNG TÁC PHẨM KHI DI CHUỘT */
.artwork-frame{position:relative;}
.artwork-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at 50% 15%, rgba(255,250,235,.55), transparent 62%);
  transition:opacity .45s ease;
}
.artwork:hover .artwork-frame::after{opacity:1;}
.artwork:hover .artwork-frame{animation-play-state:paused;}
.artwork-frame img{transition:transform .7s cubic-bezier(.2,.8,.3,1), filter .5s ease;}
.artwork:hover .artwork-frame img{transform:scale(1.045); filter:brightness(1.06) contrast(1.02);}
.art-plaque.small{transition:transform .4s ease;}
.artwork:hover .art-plaque.small{transform:translateX(4px);}

/* 4. LIGHTBOX KIỂU BẢO TÀNG */
.museum-lightbox{
  position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center;
  background:rgba(18,18,17,.96); padding:30px 20px;
}
.museum-lightbox.open{display:flex; animation:lbFade .45s ease;}
@keyframes lbFade{from{opacity:0;} to{opacity:1;}}
.lb-stage{max-width:820px; width:100%; text-align:center;}
.lb-frame{background:#fff; padding:16px; display:inline-block; max-width:100%; box-shadow:0 30px 70px rgba(0,0,0,.6); animation:lbZoom .5s cubic-bezier(.2,.9,.3,1);}
@keyframes lbZoom{from{transform:scale(.9); opacity:0;} to{transform:scale(1); opacity:1;}}
.lb-frame img{max-width:100%; max-height:66vh; display:block;}
.lb-plaque{margin-top:20px; color:#F7F6F3;}
.lb-plaque .lb-title{display:block; font-family:var(--kyyeu-heading-font); font-size:19px;}
.lb-plaque .lb-medium{display:block; font-size:12px; color:#9A9A90; font-style:italic; margin-top:5px;}
.lb-nav{margin-top:24px; display:flex; justify-content:center; align-items:center; gap:22px;}
.lb-nav button{
  background:none; border:1px solid rgba(247,246,243,.35); color:#F7F6F3;
  width:42px; height:42px; border-radius:50%; cursor:pointer; font-size:16px;
  transition:background .3s ease, transform .3s ease;
}
.lb-nav button:hover{background:rgba(247,246,243,.14); transform:scale(1.08);}
.lb-count{font-size:12px; letter-spacing:.14em; color:#9A9A90;}
.lb-close{position:absolute; top:22px; right:26px; background:none; border:none; color:#F7F6F3; font-size:28px; cursor:pointer; opacity:.7;}
.lb-close:hover{opacity:1;}
.artwork-frame{cursor:zoom-in;}