@font-face{font-family:Prata;src:url(fonts/Prata.ttf);font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(fonts/BeVietnamPro-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:"Be Vietnam Pro";src:url(fonts/BeVietnamPro-SemiBold.ttf);font-weight:600;font-display:swap}
@font-face{font-family:Sign;src:url(fonts/MrsSaintDelafield-Regular.ttf);font-display:swap}
@font-face{font-family:Bodoni;src:url(fonts/BodoniModa.ttf);font-weight:400 900;font-display:swap}
@font-face{font-family:Anton;src:url(fonts/Anton.ttf);font-display:swap}
@font-face{font-family:Syne;src:url(fonts/Syne.ttf);font-weight:400 800;font-display:swap}
@font-face{font-family:ArchivoB;src:url(fonts/ArchivoBlack.ttf);font-display:swap}
:root{--paper:#E6DED4;--ink:#1F1A19;--wine:#5A1C28;--soft:#6A5F59;--line:rgba(31,26,25,.28);--serif:Prata,Georgia,serif;--sans:"Be Vietnam Pro",Arial,sans-serif;--t:5.8s}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{font:500 15px/1.5 var(--sans);color:var(--ink);background:var(--bg,var(--paper));overflow-x:clip}
:root[data-look=a]{--ink:#F7DDE3;--soft:#E7BFC8;--wine:#FF9DB3;--line:rgba(247,221,227,.3);--title:Anton,Impact,sans-serif;--tw:400;--ls:0;--up:1}
:root[data-look=b]{--ink:#120A0C;--soft:#3A1C24;--wine:#120A0C;--line:rgba(18,10,12,.3);--title:Syne,Arial,sans-serif;--tw:800;--ls:-.04em}
:root[data-look=c]{--ink:#101214;--soft:#3C4147;--wine:#B3122F;--line:rgba(16,18,20,.3);--title:ArchivoB,Arial,sans-serif;--tw:400;--ls:-.03em}
a{color:inherit;text-decoration:none}
.lab{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}

.hero{position:relative;height:100vh;min-height:600px;overflow:hidden;background:var(--bg,var(--paper));transition:background-color .7s}
.top{position:absolute;z-index:6;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(18px,3.4vw,52px)}
.top img{height:112px;margin:-26px 0 -30px -18px}

/* tung slide */
.slide{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity .5s,visibility 0s .5s}
.slide.on{visibility:visible;opacity:1;transition:opacity .35s}
.title{position:absolute;left:clamp(18px,3.4vw,52px);top:50%;transform:translateY(-54%);z-index:1;display:flex;
  font:var(--tw,400) var(--fs)/1 var(--title,var(--serif));letter-spacing:var(--ls,-.02em);color:var(--ink);white-space:nowrap;overflow:hidden;padding:.06em 0 .14em}
.title span{display:inline-block;transform:translateY(112%)}
.slide.on .title span{transform:none;transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*45ms + .1s)}
.fig{position:absolute;z-index:2;right:var(--r,9vw);top:50%;height:min(var(--h,78vh),48vw);aspect-ratio:var(--a);
  transform:translate(16%,-42%) rotate(7deg) scale(.92);opacity:0}
.slide.on .fig{transform:translate(0,-50%) rotate(var(--rot,-2deg));opacity:1;transition:transform 1.1s cubic-bezier(.2,.8,.2,1) .15s,opacity .5s .15s}
.fig img{display:block;width:100%;height:100%;filter:drop-shadow(0 18px 22px rgba(40,26,20,.28));animation:float 7s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-7px) rotate(-.5deg)}to{transform:translateY(9px) rotate(.7deg)}}

/* chu thich so nhu bang huong dan */
.tag{position:absolute;display:flex;align-items:center;gap:8px;white-space:nowrap;opacity:0;transform:translateX(var(--dx,14px))}
.tag i{width:var(--l,70px);height:1px;background:var(--ink);transform-origin:var(--o,left);transform:scaleX(0)}
.tag b{width:21px;height:21px;border-radius:50%;background:var(--ink);color:var(--bg,var(--paper));box-shadow:0 0 0 2px var(--bg,var(--paper));font-size:10.5px;display:grid;place-items:center;flex:none}
.tag u{text-decoration:none;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;background:var(--bg,var(--paper));padding:2px 7px}
.slide.on .tag{opacity:1;transform:none;transition:opacity .5s,transform .5s;transition-delay:calc(.75s + var(--i)*.14s)}
.slide.on .tag i{transform:scaleX(1);transition:transform .6s;transition-delay:calc(.75s + var(--i)*.14s)}

.note{position:absolute;z-index:3;left:clamp(18px,3.4vw,52px);bottom:clamp(74px,12vh,120px);max-width:520px;opacity:0;transform:translateY(14px)}
.slide.on .note{opacity:1;transform:none;transition:opacity .6s .55s,transform .6s .55s}
.note p{font:600 clamp(17px,1.5vw,22px)/1.3 var(--sans);margin:6px 0 10px}
.price{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--soft)}
.price b{color:var(--wine);font-weight:600}

/* cot chu doc va thanh duoi */
.side{position:absolute;z-index:4;right:clamp(12px,1.8vw,28px);top:50%;writing-mode:vertical-rl;transform:translateY(-50%);font:var(--tw,400) clamp(30px,4.6vh,48px)/1 var(--title,var(--serif));letter-spacing:.02em;display:flex;align-items:center;gap:.3em}
.star{display:inline-block;color:var(--wine);transition:transform 1s cubic-bezier(.2,.8,.2,1);transform:rotate(calc(var(--turn,0)*180deg))}
.foot{position:absolute;z-index:6;inset:auto 0 0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 clamp(18px,3.4vw,52px) 20px}
.bars{display:flex;align-items:center;gap:10px}
.bars button{all:unset;cursor:pointer;width:clamp(36px,5vw,72px);height:18px;display:flex;align-items:center}
.bars button:focus-visible{outline:1px solid var(--wine);outline-offset:2px}
.bars u{display:block;width:100%;height:2px;background:var(--line);position:relative;overflow:hidden}
.bars u::after{content:"";position:absolute;inset:0;background:var(--wine);transform:scaleX(0);transform-origin:left}
.bars .on u::after{animation:fill var(--t) linear forwards}
.paused .bars .on u::after{animation:none;transform:scaleX(1)}
@keyframes fill{to{transform:scaleX(1)}}
.book{font:400 44px/1 Sign,cursive;color:var(--wine)}
.small{font-size:12px;color:var(--soft);padding:14px clamp(18px,3.4vw,52px);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;background:#D6CCBF}

@media (max-width:860px){
  .top img{height:78px;margin:-16px 0 -20px -12px}
  .side{display:none}
  .title{top:96px;transform:none}
  .fig{left:50%;right:auto;top:49%;height:46vh!important;transform:translate(-40%,-44%) rotate(6deg) scale(.92)}
  .slide.on .fig{transform:translate(-50%,-50%) rotate(var(--rot,-2deg))}
  .tag i{width:12px}
  .tag u{font-size:9.5px;letter-spacing:.08em}.tag b{width:17px;height:17px;font-size:9px}
  .note{bottom:62px;right:18px}
  .note p{font-size:17px;margin:4px 0 6px}
  .price{font-size:13px;gap:2px 14px}
  .book{font-size:32px}
}

/* look d: trang giay tren khung den, chu doc lon, rat nhieu khoang trang */
:root[data-look=d]{--ink:#161514;--soft:#55514D;--wine:#5A1C28;--line:rgba(243,241,236,.34);--sheet:#F3F1EC;--title:Bodoni,Georgia,serif;--tw:400;--ls:.005em}
[data-look=d] .hero{color:var(--sheet)}
[data-look=d] .top{padding-top:12px;padding-bottom:0;color:var(--sheet)}
.word{font:400 44px/1 Sign,cursive}
[data-look=d] .slide{inset:clamp(52px,8vh,74px) clamp(30px,4.4vw,84px) clamp(52px,8vh,74px);background:var(--sheet);color:var(--ink)}
[data-look=d] .slide::after{content:"";position:absolute;right:13.5%;top:7%;width:62px;height:1px;background:var(--ink);transform:rotate(-36deg)}
[data-look=d] .title{left:auto;right:14px;top:0;bottom:0;transform:none;writing-mode:vertical-rl;align-items:center;justify-content:center;padding:0 .04em;font-variation-settings:"opsz" 96}
[data-look=d] .title span{transform:translateX(-112%)}
[data-look=d] .slide.on .title span{transform:none}
[data-look=d] .title .st{color:var(--wine)}
[data-look=d] .fig{left:47%;right:auto;height:min(72vh,42vw);transform:translate(-42%,-44%) rotate(4deg) scale(.94)}
[data-look=d] .slide.on .fig{transform:translate(-50%,-50%) rotate(var(--rot,-2deg))}
[data-look=d] .fig img{filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
[data-look=d] .tag u{background:var(--sheet)}
[data-look=d] .tag b{color:var(--sheet);box-shadow:0 0 0 2px var(--sheet)}
[data-look=d] .note{left:clamp(20px,2.4vw,40px);bottom:clamp(20px,3.6vh,36px);max-width:300px}
[data-look=d] .note::before{content:"";display:block;width:58px;height:1px;background:var(--ink);transform:rotate(-36deg);transform-origin:left;margin:0 0 42px}
[data-look=d] .note p{font:500 14px/1.45 var(--sans)}
[data-look=d] .price{font-size:13px;flex-direction:column;gap:1px;color:var(--soft)}
[data-look=d] .price span{display:flex;justify-content:space-between;gap:30px;border-bottom:1px solid rgba(22,21,20,.14);padding:3px 0}
[data-look=d] .price b{color:var(--ink)}
[data-look=d] .meta{position:absolute;left:clamp(20px,2.4vw,40px);right:15%;top:clamp(16px,2.6vh,26px);display:flex;justify-content:space-between;font-size:13px}
.meta{display:none}
[data-look=d] .meta{display:flex}
[data-look=d] .side{display:none}
[data-look=d] .foot{padding-bottom:12px;color:var(--sheet)}
[data-look=d] .book{color:var(--sheet);font-size:38px}
[data-look=d] .bars u::after{background:var(--sheet)}
[data-look=d] .mid{display:block}
.mid{display:none;font:400 19px/1 Bodoni,Georgia,serif;letter-spacing:.08em}
@media (max-width:860px){
  [data-look=d] .slide{inset:64px 12px 56px}
  [data-look=d] .fig{left:50%;top:39%;height:32vh!important}
  [data-look=d] .tag u{font-size:8.5px;padding:1px 3px}
  [data-look=d] .tag{gap:3px}
  [data-look=d] .tag i{width:7px}
  [data-look=d] .note{left:14px;right:60px;bottom:14px;max-width:none}
  [data-look=d] .note::before{margin-bottom:26px;width:40px}
  [data-look=d] .slide::after{display:none}
  [data-look=d] .title{right:4px}
  [data-look=d] .meta{left:14px;right:60px;top:12px}
  [data-look=d] .mid{display:none}
}

/* cac phan duoi hero: giay trang tren nen than */
body{background:#262524}
.sub{display:flex;justify-content:center;gap:clamp(18px,4vw,56px);padding:16px 18px 18px;color:#F3F1EC;background:#262524;flex-wrap:wrap}
.sec{background:#F3F1EC;color:#161514;margin:0 clamp(12px,4.4vw,84px) 14px;padding:clamp(22px,3vw,44px) clamp(18px,3.4vw,60px) clamp(34px,5vw,72px);position:relative;scroll-margin-top:12px}
.meta2{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.meta2 i{width:62px;height:1px;background:#161514;transform:rotate(-36deg)}
.sec h2{font:400 clamp(50px,8vw,124px)/1 Bodoni,Georgia,serif;font-variation-settings:"opsz" 96;letter-spacing:-.01em;margin:clamp(16px,3vw,40px) 0 clamp(20px,3.4vw,48px)}
.sec h2 em{font-style:normal;color:#5A1C28}
.two,.vwrap{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,84px);align-items:start}
.big{font:400 clamp(24px,2.6vw,38px)/1.2 Bodoni,Georgia,serif;font-variation-settings:"opsz" 40}
.trust{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:0}
.trust li{padding:9px 0;border-top:1px solid rgba(22,21,20,.2);font-weight:600}
.grid{columns:3 280px;column-gap:clamp(24px,3.4vw,56px)}
.grp{break-inside:avoid;margin:0 0 34px}
.grp h3{font:400 25px/1.15 Bodoni,Georgia,serif;font-variation-settings:"opsz" 28;padding-bottom:8px;border-bottom:1px solid #161514}
.rows div{display:flex;justify-content:space-between;gap:18px;padding:6px 0;border-bottom:1px solid rgba(22,21,20,.14);font-size:14px}
.rows b{font-weight:600;white-space:nowrap}
.gwrap{display:grid;grid-template-columns:1fr minmax(220px,380px) 1fr;gap:clamp(18px,3vw,50px);align-items:center}
.gwrap img{width:100%;display:block;filter:drop-shadow(0 10px 14px rgba(0,0,0,.18))}
.glist{list-style:none;padding:0;margin:0;display:grid;gap:34px}
.glist li{display:flex;gap:12px;align-items:flex-start}
.glist b{flex:none;width:26px;height:26px;border-radius:50%;background:#161514;color:#F3F1EC;display:grid;place-items:center;font-size:12px}
.glist h3{font:600 13px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.glist p{font-size:14px;color:#55514D}
.tip{margin-top:26px;text-align:center;font:400 22px/1.3 Bodoni,Georgia,serif}
.band{display:flex;justify-content:center;align-items:center;gap:clamp(12px,2.4vw,30px);flex-wrap:wrap;padding:18px;color:#F3F1EC;font:400 clamp(17px,1.7vw,24px)/1.3 Bodoni,Georgia,serif;text-align:center}
.band em{font-style:normal;color:#C98B98}
.hours{margin-top:20px;max-width:420px}
.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.pill{border:1px solid #161514;padding:10px 16px;font-size:13px;font-weight:600;transition:background .2s,color .2s}
.pill:hover{background:#161514;color:#F3F1EC}
.pill:focus-visible,.sub a:focus-visible{outline:2px solid #5A1C28;outline-offset:2px}
.map{width:100%;height:clamp(320px,44vw,560px);border:0;filter:grayscale(1) contrast(.96)}
.end{color:#F3F1EC;padding:30px clamp(18px,4.4vw,84px) 34px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;font-size:14px}
.end .sig{font:400 60px/1 Sign,cursive}
.end small{color:#B7B1AA;max-width:290px;text-align:right}
.go .rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s}
.go .rv.in{opacity:1;transform:none}
@media (max-width:860px){
  .two,.vwrap{grid-template-columns:1fr}
  .gwrap{grid-template-columns:1fr}.gwrap img{max-width:240px;margin:auto;order:-1}
  .glist{gap:16px}
  .end{grid-template-columns:1fr}.end small{text-align:left}
}
.still .title span,.still .fig,.still .tag,.still .tag i,.still .note{transition:none!important}
.still .fig img{animation:none}

/* nhieu trang */
.top a{text-decoration:none}
.menu{display:flex;gap:clamp(16px,2.6vw,38px);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.menu a{padding:4px 0;border-bottom:1px solid transparent}
.menu a:hover,.menu a[aria-current]{border-bottom-color:currentColor}
.mm{display:none;position:relative}
.mm summary{list-style:none;cursor:pointer;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.mm summary::-webkit-details-marker{display:none}
.mm nav{position:absolute;right:0;top:30px;z-index:20;background:#262524;padding:14px 18px;display:grid;gap:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;min-width:170px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.page-top{position:static;background:#262524;color:#F3F1EC;display:flex;justify-content:space-between;align-items:center;padding:12px clamp(18px,3.4vw,52px)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.8vw,26px)}
.card{display:block;border-top:1px solid #161514;padding-top:12px;transition:transform .3s}
.card:hover{transform:translateY(-5px)}
.card img{display:block;width:100%;height:clamp(180px,20vw,300px);object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.16))}
.card h3{font:400 28px/1.1 Bodoni,Georgia,serif;margin-top:12px}
.card p{font-size:13px;color:#55514D}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.slot{aspect-ratio:4/5;min-width:0;overflow:hidden;display:grid;place-items:center;text-align:center;background:#E7E4DE;color:#55514D;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:12px}
.slot.w{grid-column:span 2;aspect-ratio:auto}
.slot img{width:86%;height:86%;object-fit:contain}
.pz{all:unset;cursor:pointer;margin-right:auto;margin-left:16px;font-size:11px;color:#F3F1EC;opacity:.75}
.pz:hover,.pz:focus-visible{opacity:1;text-decoration:underline}
.back{display:inline-block;margin-top:24px;font-weight:600;border-bottom:1px solid currentColor}
.sec:first-of-type{margin-top:14px}
@media (max-width:860px){
  .menu{display:none}.mm{display:block}
  .top .lab{display:none}
  .cards,.gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}