:root{
  --ivory:#FAF6EF; --cream:#F3EBDD; --champ:#E9DCC5; --gold:#B9894A; --gold-d:#96703A;
  --esp:#241B12; --esp-2:#2E2418; --ink:#3A2E20; --slate:#5E7797;
  --sh:0 18px 50px rgba(36,27,18,.14);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;font-size:18px}
body{font-family:'Jost',sans-serif;background:var(--ivory);color:var(--ink);font-weight:400;line-height:1.7;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.serif{font-family:'Fraunces',serif}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
.eyebrow{font-size:.86rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500}
.sec-head{text-align:center;margin-bottom:2.6rem}
.sec-head h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.9rem,4.4vw,2.9rem);color:var(--esp);margin-top:.5rem}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* Đảm bảo khung chữ không bị co giãn khi font nạp xong */
.chk-row {
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  min-height: 1.2em; /* Giữ cố định chiều cao dòng */
}

/* ---------- NAV ---------- */
#nav{position:fixed;inset:0 0 auto 0;z-index:60;padding:.7rem 0;background:rgba(250,246,239,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(36,27,18,.08)}
#nav .wrap{display:flex;align-items:center;gap:.7rem}
.brand{font-family:'Fraunces',serif;font-style:italic;font-weight:500;font-size:1.18rem;color:var(--esp);white-space:nowrap}
.nav-links{display:flex;gap:1.5rem;margin-left:auto;align-items:center}
.nav-links a{font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:400;transition:color .35s}
.nav-links a:hover{color:var(--gold)}
.nav-call{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff!important;padding:.5rem 1.15rem;border-radius:99px;font-weight:500}
.nav-login{color:var(--gold)!important;padding:.42rem 1rem;border-radius:99px;font-weight:500;display:inline-flex;align-items:center;gap:.35rem}
.burger{display:none;margin-left:.2rem;background:none;border:none;color:var(--esp);font-size:1.5rem;cursor:pointer;line-height:1}
.mmenu{display:none;position:fixed;inset:0;background:rgba(250,246,239,.97);backdrop-filter:blur(10px);z-index:59;padding:6rem 2rem;flex-direction:column;gap:1.6rem;text-align:center}
.mmenu.open{display:flex}
.mmenu a{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--esp)}
@media(max-width:880px){
  .nav-links a:not(.nav-call):not(.nav-login){display:none}
  .burger{display:block}
  .brand{font-size:1.02rem}
  .nav-call{padding:.45rem .85rem;font-size:.78rem}
  .nav-login{padding:.38rem .8rem;font-size:.78rem}
  #nav .wrap{gap:.45rem;padding:0 14px}
  .nav-links{gap:.45rem}
}

/* ---------- HERO ---------- */
.hero{position:relative;background:var(--ivory);padding-top:62px}
.hero-img{display:block;width:100%;height:auto}
.hero-in{width:100%;padding:1.4rem 22px 1.6rem;max-width:1180px;margin:0 auto;background:var(--ivory)}
.hero .eyebrow{color:var(--gold2)}
.hero .btn-ghost{border:1.5px solid var(--gold);color:var(--gold2);background:transparent;text-shadow:none}
.hero-cta{display:flex;gap:.8rem;margin:1rem 0 1.1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:99px;padding:.85rem 1.7rem;font-size:.9rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;transition:transform .25s,box-shadow .25s;cursor:pointer;border:none;font-family:'Jost',sans-serif}
.btn:active{transform:scale(.96)}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;box-shadow:0 10px 26px rgba(150,112,58,.4)}
.btn-ghost{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.65);color:#fff;backdrop-filter:blur(6px)}

/* points check widget */
.chk{background:rgba(255,255,255,.94);border:2px dashed var(--gold);border-radius:22px;padding:1rem 1.1rem;max-width:430px;box-shadow:var(--sh)}
.chk h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.02rem;color:var(--esp);margin-bottom:.55rem}
.chk-row{display:flex;gap:.5rem}
.chk-row input{flex:1;min-width:0;border:1.5px solid #E4D8C2;border-radius:14px;padding:.68rem .9rem;font-family:'Jost',sans-serif;font-size:1rem;background:#fff;outline:none;transition:border .25s,box-shadow .25s}
.chk-row input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,137,74,.18)}
.chk-row .btn{padding:.68rem 1.2rem}
.chk-join{margin-top:.55rem;font-size:.85rem;color:var(--gold-d);background:none;border:none;cursor:pointer;font-family:'Jost',sans-serif}
.chk-join:hover{text-decoration:underline}
.chk-res{margin-top:.7rem;display:none;background:var(--ivory);border-radius:16px;padding:.8rem .95rem;animation:pop .35s cubic-bezier(.34,1.4,.64,1)}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.chk-res .nm{font-weight:500;color:var(--esp)}
.chk-res .pt{font-family:'Fraunces',serif;font-size:1.9rem;color:var(--gold-d);line-height:1.15}
.chk-res .cr{display:inline-block;background:var(--champ);border-radius:99px;padding:.14rem .7rem;font-size:.82rem;color:var(--esp);margin-top:.2rem}
.chk-res .openc{margin-top:.55rem;width:100%}

/* ---------- RIBBON ---------- */
.ribbon{background:var(--esp);color:#EFE6D6;padding:1.5rem 0}
.ribbon .wrap{display:flex;justify-content:center;gap:2.6rem;flex-wrap:wrap;text-align:center}
.ribbon b{display:block;font-family:'Fraunces',serif;font-weight:500;font-size:1rem;color:#F0DFC2;letter-spacing:.04em}
.ribbon span{font-size:.86rem;opacity:.85}

/* ---------- ABOUT ---------- */
.about{padding:5.5rem 0}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:3.6rem;align-items:center}
.frame{position:relative}
.frame img{border-radius:20px;aspect-ratio:4/3;object-fit:cover;width:100%}
.frame::before{content:'';position:absolute;inset:-16px 16px 16px -16px;border:1.5px solid var(--gold);border-radius:22px;z-index:-1}
.about h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--esp);margin:.5rem 0 1rem}
.about ul{list-style:none;margin-top:1.2rem;display:grid;gap:.7rem}
.about li{padding-left:1.5rem;position:relative}
.about li::before{content:'✦';position:absolute;left:0;color:var(--gold)}
@media(max-width:820px){.about .wrap{grid-template-columns:1fr;gap:2.4rem}}

/* ---------- SERVICES ---------- */
.services{background:var(--cream);padding:5.5rem 0}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.svc{background:#fff;border-radius:20px;padding:1.7rem 1.5rem;box-shadow:0 8px 26px rgba(36,27,18,.06);transition:transform .3s,box-shadow .3s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.svc .ic{font-size:1.5rem}
.svc h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.2rem;color:var(--esp);margin:.5rem 0 .25rem}
.svc p{font-size:.92rem;opacity:.8}
.svc-cta{text-align:center;margin-top:2.4rem}
@media(max-width:880px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ---------- GALLERY ---------- */
.gallery{padding:5.5rem 0}
.gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.gal{position:relative;border-radius:18px;overflow:hidden;cursor:pointer;aspect-ratio:6/5;background:var(--champ)}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gal:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;inset:auto 0 0 0;padding:1.6rem .9rem .7rem;background:linear-gradient(to top,rgba(20,14,8,.66),transparent);color:#fff;font-size:.82rem;letter-spacing:.06em;opacity:0;transition:opacity .4s}
.gal:hover figcaption{opacity:1}
@media(max-width:680px){.gal-grid{grid-template-columns:repeat(2,1fr);gap:.7rem}}
.lightbox{position:fixed;inset:0;background:rgba(20,14,8,.9);z-index:100;display:none;align-items:center;justify-content:center;padding:2rem}
.lightbox.open{display:flex}
.lightbox img{max-width:min(92vw,560px);max-height:86vh;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-x{position:absolute;top:1.1rem;right:1.3rem;background:none;border:none;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}

/* ---------- EXPERIENCE ---------- */
.exp{background:var(--esp);color:#EFE6D6;padding:5.5rem 0}
.exp .sec-head h2{color:#F6EEDD}
.exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2.8rem}
.exp-grid img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.perk{border-left:2px solid var(--gold);padding-left:1.1rem}
.perk b{font-family:'Fraunces',serif;font-weight:500;font-size:1.06rem;color:#F0DFC2;display:block;margin-bottom:.25rem}
.perk span{font-size:.9rem;opacity:.82}
@media(max-width:680px){.exp-grid{grid-template-columns:repeat(3,1fr);gap:.5rem}.perks{grid-template-columns:1fr;gap:1.2rem}}

/* ---------- REVIEWS ---------- */
.reviews{padding:5.5rem 0}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-bottom:2.6rem}
.rev{background:#fff;border-radius:20px;padding:1.6rem 1.5rem;box-shadow:0 8px 26px rgba(36,27,18,.06)}
.rev .st{color:var(--gold);letter-spacing:.18em;font-size:.85rem}
.rev p{font-size:.94rem;margin:.7rem 0 .9rem;font-style:italic}
.rev b{font-weight:500;color:var(--esp);font-size:.88rem}
@media(max-width:820px){.rev-grid{grid-template-columns:1fr}}
.rev-cta{background:linear-gradient(135deg,var(--champ),#F6EEDC);border-radius:24px;padding:2.3rem 1.6rem;text-align:center}
.rev-cta h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.6rem;color:var(--esp);margin-bottom:1.1rem}

/* ---------- VISIT ---------- */
.visit{background:var(--cream);padding:5.5rem 0}
.visit .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:2.6rem;align-items:start}
.hours{background:#fff;border-radius:22px;padding:1.7rem 1.6rem;box-shadow:0 8px 26px rgba(36,27,18,.06)}
.hours h3,.vinfo h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.25rem;color:var(--esp);margin-bottom:1rem}
.hrow{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px dashed #E7DCC6;font-size:.94rem}
.hrow:last-child{border:none}
.hrow.today{color:var(--gold-d);font-weight:500}
.vinfo p{margin-bottom:.85rem;display:flex;gap:.6rem;align-items:flex-start}
.vinfo a:hover{color:var(--gold-d)}
.map{border-radius:22px;overflow:hidden;margin-top:1.2rem;box-shadow:0 8px 26px rgba(36,27,18,.08)}
.map iframe{width:100%;height:270px;border:0;display:block}
@media(max-width:820px){.visit .wrap{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
footer{background:var(--esp);color:#D9CCB6;padding:3.6rem 0 7.5rem}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.4rem}
.ft .brand{color:#F0DFC2;font-size:1.4rem}
.ft p{font-size:.9rem;opacity:.8;margin:.6rem 0 1rem}
.ft h4{font-family:'Fraunces',serif;font-weight:500;color:#F0DFC2;margin-bottom:.8rem;font-size:1rem}
.ft a{display:block;font-size:.9rem;padding:.22rem 0;opacity:.85}
.ft a:hover{color:var(--gold);opacity:1}
.soc{display:flex;gap:.7rem;margin-top:.4rem}
.soc a{width:38px;height:38px;border:1px solid rgba(240,223,194,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0}
.soc a:hover{border-color:var(--gold);background:rgba(185,137,74,.15)}
.copy{border-top:1px solid rgba(240,223,194,.14);margin-top:2.6rem;padding-top:1.4rem;font-size:.82rem;opacity:.65;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
@media(max-width:760px){.ft{grid-template-columns:1fr}}

/* ---------- ACTION BAR + FAB ---------- */
.abar{position:fixed;z-index:55;display:flex;gap:.55rem}
@media(max-width:759px){
  .abar{left:0;right:0;bottom:0;background:rgba(250, 246, 239, 0) !important;backdrop-filter:blur(14px);padding:.6rem .7rem calc(.6rem + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(36,27,18,.12)}
  .abar .btn{flex:1;padding:.72rem .3rem;font-size:.72rem}
}
@media(min-width:760px){
  .abar{right:1.4rem;bottom:1.4rem;background:transparent !important;backdrop-filter:blur(14px);border-radius:99px;padding:.5rem;box-shadow:var(--sh)}
  .abar .btn{padding:.66rem 1.25rem;font-size:.78rem}
}
.btn-champ{background:var(--champ);color:var(--esp)}
.btn-line{background:transparent;border:1.5px solid var(--gold);color:var(--gold-d)}
.fab{position:fixed;right:1rem;z-index:56;bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:760px){.fab{right:1.65rem;bottom:6.2rem}}
.fab-main{width:52px;height:52px;border-radius:50%;background:var(--esp);color:#F0DFC2;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(36,27,18,.35);transition:transform .3s}
.fab-main:active{transform:scale(.94)}
.fab-list{position:absolute;bottom:62px;right:2px;display:flex;flex-direction:column;gap:.55rem;pointer-events:none}
.fab-it{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(36,27,18,.22);opacity:0;transform:translateY(12px) scale(.8);transition:all .3s cubic-bezier(.34,1.5,.64,1);padding:0}
.fab.open .fab-it{opacity:1;transform:none;pointer-events:auto}
.fab-it:hover{background:var(--champ)}

/* ---------- FIREWORKS ---------- */

/* banner */
.hero-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* firework */
.fw-burst {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  box-shadow: 
    0 -100px #FFE29F, 70px -70px #B9894A, 100px 0 #FFF, 70px 70px #E9DCC5,
    0 100px #FFE29F, -70px 70px #B9894A, -100px 0 #FFF, -70px -70px #E9DCC5,
    0 -160px #FFF, 110px -110px #FFE29F, 160px 0 #B9894A, 110px 110px #FFF,
    0 160px #E9DCC5, -110px 110px #FFE29F, -160px 0 #B9894A, -110px -110px #FFF;
  animation: fwHeroPop 3s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

/* fw on banner */
.burst-1 { top: 35%; left: 30%; animation-delay: 0.3s; }
.burst-2 { top: 25%; left: 70%; animation-delay: 1.2s; }
.burst-3 { top: 50%; left: 50%; animation-delay: 2.1s; }

/* affect */
@keyframes fwHeroPop {
  0% {
    transform: scale(0.05) translateY(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: scale(1.8) translateY(50px);
    opacity: 0;
  }
}

/* ================= LOYALTY / ADMIN ================= */
.lo-hide{display:none!important}
#loApp{position:fixed;inset:0;z-index:80;background:var(--ivory);overflow-y:auto;-webkit-overflow-scrolling:touch}
.lo-head{position:sticky;top:0;z-index:5;background:rgba(250,246,239,.9);backdrop-filter:blur(12px);display:flex;align-items:center;gap:.6rem;padding:.8rem 1rem;border-bottom:1px solid #EDE3CE;white-space:nowrap}
.lo-head .brand{color:var(--esp);font-size:1.05rem;overflow:hidden;text-overflow:ellipsis}
.lo-head .sp{flex:1}
.pill-sm{border:1.5px solid var(--gold);background:#fff;color:var(--gold-d);border-radius:99px;padding:.34rem .8rem;font-size:.8rem;font-family:'Jost';cursor:pointer;transition:transform .2s}
.pill-sm:active{transform:scale(.95)}
.pill-sm.dark{background:var(--esp);border-color:var(--esp);color:#F0DFC2}
.lang-t{display:flex;border:1.5px solid var(--gold);border-radius:99px;overflow:hidden}
.lang-t button{border:none;background:#fff;color:var(--gold-d);font-family:'Jost';font-size:.76rem;padding:.32rem .6rem;cursor:pointer}
.lang-t button.on{background:var(--gold);color:#fff}
.lo-body{max-width:640px;margin:0 auto;padding:1.1rem 1rem 6rem}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-bottom:1rem}
.stat{background:#fff;border-radius:24px;padding:1rem .6rem;text-align:center;box-shadow:0 6px 20px rgba(36,27,18,.06)}
.stat b{font-family:'Fraunces',serif;font-weight:500;font-size:1.7rem;color:#B0486B;display:block;line-height:1.1}
.stat span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.srch{display:flex;gap:.55rem;margin-bottom:.8rem}
.srch input{flex:1;min-width:0;border:1.5px solid #E4D8C2;border-radius:99px;padding:.68rem 1.1rem;font-family:'Jost';font-size:1rem;outline:none;background:#fff}
.srch input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,137,74,.16)}
.srch .btn{padding:.6rem 1.15rem;font-size:.8rem}
.add-btn{width:100%;margin-bottom:1rem}
.bday-bn{background:linear-gradient(135deg,#FFF3E0,#FFE7EF);border-radius:18px;padding:.85rem 1rem;font-size:.9rem;margin-bottom:1rem;cursor:pointer;border:1.5px dashed #E7B96B}
.bday-st{display:flex;justify-content:space-between;align-items:center;background:#FFF3E0;border-radius:14px;padding:.55rem .9rem;font-size:.86rem;margin-bottom:.8rem}
.bday-st button{background:none;border:none;color:var(--gold-d);cursor:pointer;font-family:'Jost';font-size:.86rem}
.cust{background:#fff;border-radius:20px;padding:.95rem 1.05rem;margin-bottom:.65rem;display:flex;align-items:center;gap:.8rem;cursor:pointer;box-shadow:0 5px 16px rgba(36,27,18,.05);opacity:0;transform:translateY(14px);animation:cIn .45s forwards;transition:transform .2s}
.cust:active{transform:scale(.98)}
@keyframes cIn{to{opacity:1;transform:none}}
.cust .nm{font-weight:500;color:var(--esp)}
.cust .ph{font-size:.82rem;opacity:.7}
.badge{margin-left:auto;background:var(--cream);border-radius:99px;padding:.34rem .75rem;font-size:.78rem;color:var(--esp);white-space:nowrap}
.badge.hi{background:linear-gradient(135deg,#F8C6D8,#F3A8C4);color:#7A2547}
.empty{text-align:center;padding:2.6rem 1rem;opacity:.65}

/* modals & sheets */
.ov{position:fixed;inset:0;z-index:90;background:rgba(36,27,18,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center}
.ov.open{display:flex}
.sheet{background:var(--ivory);width:min(520px,100%);max-height:92vh;overflow-y:auto;border-radius:28px;padding:1.5rem 1.3rem;position:relative;animation:mIn .42s cubic-bezier(.32,1.25,.6,1)}
@keyframes mIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:640px){
  .ov{align-items:flex-end}
  .sheet{border-radius:28px 28px 0 0;width:100%;max-height:92svh;animation:sUp .45s cubic-bezier(.32,1.2,.55,1)}
  .sheet::before{content:'';display:block;width:44px;height:4px;border-radius:99px;background:#D8CBB2;margin:-4px auto 12px}
  @keyframes sUp{from{transform:translateY(100%)}to{transform:none}}
}
.x{position:absolute;top:.9rem;right:1rem;background:#fff;border:none;width:34px;height:34px;border-radius:50%;font-size:1.05rem;cursor:pointer;color:var(--ink);box-shadow:0 4px 12px rgba(36,27,18,.1)}
.sheet h3{font-family:'Fraunces',serif;font-weight:500;font-size:1.3rem;color:var(--esp);margin-bottom:1rem;padding-right:2.2rem}
.fld{margin-bottom:.85rem}
.fld label{display:block;font-size:.8rem;letter-spacing:.05em;margin-bottom:.3rem;color:var(--gold-d);font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;border:1.5px solid #E4D8C2;border-radius:14px;padding:.68rem .9rem;font-family:'Jost';font-size:1rem;background:#fff;outline:none;transition:border .25s,box-shadow .25s}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,137,74,.16)}
.fld-row{display:flex;gap:.6rem}
.fld-row>*{flex:1;min-width:0}
.fld .ccode{max-width:118px}
.err{color:#C0392B;font-size:.85rem;margin:.4rem 0 0;display:none}
.btn-full{width:100%;margin-top:.4rem}
.btn-esp{background:var(--esp);color:#F0DFC2}
.btn-red{background:#C0392B;color:#fff}
.btn-dis{opacity:.45;pointer-events:none}
.lock{width:62px;height:62px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-d));display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin:0 auto 1rem;color:#fff;box-shadow:0 12px 30px rgba(150,112,58,.4)}

/* customer detail sheet */
.dt-nm{font-family:'Fraunces',serif;font-size:1.55rem;font-weight:500;color:var(--esp)}
.dt-info{font-size:.9rem;margin:.6rem 0;display:grid;gap:.3rem}
.dt-pts{display:flex;align-items:baseline;gap:.7rem;margin:.7rem 0}
.dt-pts b{font-family:'Fraunces',serif;font-size:2.6rem;font-weight:500;color:var(--gold-d);line-height:1}
.dt-pts .cr{background:var(--champ);border-radius:99px;padding:.3rem .85rem;font-size:.85rem;color:var(--esp)}
.act3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.55rem;margin:.8rem 0 .6rem}
.act3 .btn{padding:.72rem .3rem;font-size:.78rem}
.act6{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.8rem}
.act6 button{background:#fff;border:1.5px solid #E7DCC6;border-radius:14px;padding:.6rem .3rem;font-family:'Jost';font-size:.78rem;cursor:pointer;transition:transform .2s}
.act6 button:active{transform:scale(.95)}
.act6 .del{color:#C0392B;border-color:#F0C4BE}
.visits-btn{width:100%;background:#fff;border:1.5px dashed var(--gold);border-radius:16px;padding:.75rem;font-family:'Jost';font-size:.9rem;color:var(--gold-d);cursor:pointer;margin-bottom:.8rem}
details.hist{background:#fff;border-radius:16px;padding:.8rem 1rem;margin-bottom:.9rem}
details.hist summary{cursor:pointer;font-weight:500;color:var(--esp);font-size:.92rem}
.h-it{display:flex;justify-content:space-between;gap:.8rem;padding:.55rem 0;border-bottom:1px dashed #EDE3CE;font-size:.85rem}
.h-it:last-child{border:none}
.h-it .pm{white-space:nowrap;font-weight:500}
.h-it .pm.plus{color:#1E8449}.h-it .pm.minus{color:#C0392B}

/* bill */
.bill-amt{font-family:'Fraunces',serif;font-size:2rem;text-align:center;border:1.5px solid #E4D8C2;border-radius:18px;width:100%;padding:.7rem;background:#fff;outline:none}
.bill-amt:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(185,137,74,.16)}
.chips{display:flex;gap:.45rem;margin:.6rem 0;flex-wrap:wrap;justify-content:center}
.chip{background:#fff;border:1.5px solid #E7DCC6;border-radius:99px;padding:.32rem .8rem;font-size:.82rem;cursor:pointer;font-family:'Jost'}
.chip:active{transform:scale(.94)}
.paybox{background:#fff;border-radius:18px;padding:1rem 1.1rem;margin:.8rem 0}
.prow{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.42rem 0;border-bottom:1.5px dashed #EDE3CE;font-size:.93rem}
.prow:last-child{border:none}
.prow .dots{flex:1;border-bottom:1.5px dashed #D8CBB2;margin:0 .2rem;transform:translateY(-3px)}
.prow.big{font-size:1.08rem;font-weight:600;color:var(--esp)}
.prow.gold{color:var(--gold-d);font-weight:500}
.prow.green{color:#1E8449}
.ck{display:flex;align-items:center;gap:.55rem;cursor:pointer;font-size:.93rem}
.ck input{width:22px;height:22px;accent-color:var(--gold)}
.ck.dim{opacity:.5}

/* record visit */
.steps{display:flex;gap:.35rem;margin-bottom:1.1rem}
.steps i{flex:1;height:5px;border-radius:99px;background:#E7DCC6;font-style:normal}
.steps i.on{background:var(--gold)}
.camb{width:100%;aspect-ratio:4/3;border:2px dashed var(--gold);border-radius:20px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;color:var(--gold-d);font-family:'Jost';font-size:.95rem;overflow:hidden;position:relative}
.camb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ofr{background:#fff;border:1.5px solid #E7DCC6;border-radius:16px;padding:.85rem 1rem;margin-bottom:.6rem;cursor:pointer;display:flex;gap:.7rem;align-items:center;transition:all .25s}
.ofr.on{border-color:var(--gold);background:#FDF6E9;box-shadow:0 0 0 3px rgba(185,137,74,.15)}
.ofr.dim{opacity:.5;pointer-events:none}
.ofr .tick{margin-left:auto;width:26px;height:26px;border-radius:50%;border:1.5px solid #D8CBB2;display:flex;align-items:center;justify-content:center;font-size:.8rem;color:#fff;flex:none}
.ofr.on .tick{background:var(--gold);border-color:var(--gold)}
.nav2{display:flex;gap:.6rem;margin-top:1rem}
.nav2 .btn{flex:1}
.done-ic{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#7DCEA0,#1E8449);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;animation:pop .5s cubic-bezier(.3,1.6,.6,1)}
.rcp{background:#fff;border-radius:18px;padding:1rem 1.1rem;margin:.8rem 0}

/* kiosk + pending */
.kv-wrap{max-width:520px;margin:0 auto;padding:5rem 20px 3rem}
.kv-logo{font-family:'Fraunces',serif;font-style:italic;font-size:1.5rem;color:var(--esp);text-align:center;margin-bottom:.4rem}
.kv-sub{text-align:center;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);margin-bottom:1.6rem}
.kv-card{background:#fff;border:1px solid var(--champ);border-radius:22px;padding:1.4rem 1.2rem;box-shadow:0 14px 40px rgba(36,27,18,.08)}
.kv-card h3{font-family:'Fraunces',serif;font-size:1.25rem;margin-bottom:.9rem}
.kv-big input{font-size:1.4rem;padding:.9rem 1rem;text-align:center;letter-spacing:.06em}
.kv-est{margin:.9rem 0;background:var(--cream);border-radius:14px;padding:.9rem 1rem;text-align:center;font-size:1.05rem}
.kv-est b{color:var(--gold2);font-size:1.35rem}
.kv-wait{background:#FFF8EA;border:1px dashed var(--gold);border-radius:14px;padding:.9rem 1rem;margin:.9rem 0;font-size:.92rem;line-height:1.5}
.kv-stars{display:flex;justify-content:center;gap:.5rem;margin:.8rem 0}
.kv-stars button{background:none;border:none;font-size:2.1rem;cursor:pointer;color:#D9CDB8;transition:transform .15s,color .15s}
.kv-stars button.on{color:#E9B34A;transform:scale(1.12)}
.pnd-bn{display:flex;align-items:center;gap:.6rem;width:100%;background:#FFF4DC;border:1.5px solid var(--gold);border-radius:14px;padding:.8rem 1rem;margin:.8rem 0 0;font-size:.92rem;font-weight:500;color:var(--esp);cursor:pointer;text-align:left}
.pnd-bn b{color:var(--gold2)}
.pnd-it{background:#fff;border:1px solid var(--champ);border-radius:16px;padding:.9rem 1rem;margin-bottom:.7rem}
.pnd-it .r1{display:flex;justify-content:space-between;align-items:center;gap:.6rem;font-weight:500}
.pnd-it .r2{font-size:.86rem;opacity:.7;margin:.2rem 0 .6rem}
.pnd-act{display:flex;gap:.6rem}
.pnd-act .btn{flex:1;padding:.55rem}
.kh-pnd{background:#FFF4DC;border:1px dashed var(--gold);border-radius:14px;padding:.7rem .9rem;margin:.7rem 0;font-size:.85rem;line-height:1.45}
.det-pnd{display:block;width:100%;background:#FFF4DC;border:1.5px solid var(--gold);border-radius:12px;padding:.6rem .8rem;margin:.6rem 0 0;font-size:.87rem;text-align:left;cursor:pointer}
/* NFC module */
.nfc-bar{display:flex;gap:.6rem;margin:.7rem 0 0}
.nfc-bar .btn{flex:1;min-height:48px;font-size:.95rem}
.tapwait{text-align:center;padding:1.4rem 0}
.tapwait .ring{width:96px;height:96px;margin:0 auto 1rem;border-radius:50%;border:4px solid var(--champ);border-top-color:var(--gold);animation:tspin 1.1s linear infinite;display:flex;align-items:center;justify-content:center;font-size:2rem}
@keyframes tspin{to{transform:rotate(360deg)}}
.oneA-bal{text-align:center;margin:.4rem 0 .9rem}
.oneA-bal b{font-family:'Fraunces',serif;font-size:2.6rem;color:var(--gold2);line-height:1.1}
.oneA-bal small{display:block;font-size:.9rem;opacity:.7}
.ttabs{display:flex;gap:.5rem;margin:.6rem 0 .9rem}
.ttabs button{flex:1;min-height:48px;border-radius:12px;border:1.5px solid var(--champ);background:#fff;font-family:inherit;font-size:.95rem;font-weight:500;cursor:pointer}
.ttabs button.on{background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;border-color:transparent}
.tprev{background:var(--cream);border-radius:12px;padding:.7rem .9rem;margin:.7rem 0;font-size:.95rem;text-align:center}
.tprev.bad{background:#FDECEC;color:#B3403A}
.tbig .btn{min-height:52px;font-size:1.02rem}
.wr-log{background:#241B12;color:#EAD9BD;border-radius:12px;padding:.7rem .8rem;font-family:ui-monospace,monospace;font-size:.8rem;line-height:1.55;max-height:260px;overflow-y:auto;margin-top:.8rem}
.wr-log .ok{color:#8FD694}.wr-log .err{color:#F08A80}.wr-log .wrn{color:#E9B34A}
.wr-cnt{font-family:'Fraunces',serif;font-size:2rem;color:var(--gold2);text-align:center;margin:.4rem 0}


.done-ic{width:70px;height:70px;border-radius:50%;background:linear-gradient(135deg,#7DCEA0,#1E8449);color:#fff;font-size:2rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;animation:pop .5s cubic-bezier(.3,1.6,.6,1)}
.rcp{background:#fff;border-radius:18px;padding:1rem 1.1rem;margin:.8rem 0}

/* customer card ?kh= */
.kh-wrap{max-width:520px;margin:0 auto;padding:1.2rem 1rem 4rem}
.kh-card{background:#fff;border:2px solid var(--gold);border-radius:30px;padding:1.8rem 1.4rem;text-align:center;box-shadow:var(--sh)}
.kh-logo{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--gold-d));color:#fff;font-family:'Fraunces',serif;font-size:1.7rem;display:flex;align-items:center;justify-content:center;margin:0 auto .8rem}
.kh-nm{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:500;color:var(--esp)}
.kh-pts{font-family:'Fraunces',serif;font-size:4rem;font-weight:500;color:var(--gold-d);line-height:1.05;margin:.5rem 0 .1rem}
.kh-sub{font-size:.85rem;opacity:.75}
.kh-cr{display:inline-block;background:var(--champ);border-radius:99px;padding:.4rem 1.1rem;margin-top:.7rem;color:var(--esp)}
.kh-note{font-size:.78rem;opacity:.65;margin-top:.6rem}
.kh-sec{background:#fff;border-radius:24px;padding:1.3rem 1.2rem;margin-top:1rem;box-shadow:0 6px 20px rgba(36,27,18,.06)}
.kh-sec h4{font-family:'Fraunces',serif;font-weight:500;color:var(--esp);margin-bottom:.7rem;font-size:1.08rem}
.kh-code{background:var(--ivory);border:1.5px dashed var(--gold);border-radius:14px;padding:.6rem;font-size:1.15rem;letter-spacing:.12em;font-weight:500;color:var(--gold-d);margin-bottom:.7rem}
.hw{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;font-size:.85rem}
.hw div{background:var(--ivory);border-radius:12px;padding:.6rem .7rem}
.hw b{color:var(--gold-d);display:block;font-weight:500}
.kh-act{display:grid;gap:.5rem;padding:.6rem 0 0}
.vst{border-bottom:1px dashed #EDE3CE;padding:.7rem 0}
.vst:last-child{border:none}
.vst-top{display:flex;justify-content:space-between;font-size:.88rem}
.vst-ba{display:flex;gap:.5rem;margin-top:.5rem}
.vst-ba figure{flex:1;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:#EDE3CE}
.vst-ba img{width:100%;height:100%;object-fit:cover}
.vst-ba figcaption{position:absolute;top:.35rem;left:.35rem;border-radius:99px;padding:.1rem .55rem;font-size:.66rem;letter-spacing:.06em;color:#fff}
.vst-ba .bf figcaption{background:rgba(20,14,8,.8)}
.vst-ba .af figcaption{background:var(--gold)}
.stars{display:flex;gap:.25rem;margin-top:.5rem}
.stars button{background:none;border:none;font-size:1.35rem;cursor:pointer;color:#D8CBB2;transition:transform .15s}
.stars button.on{color:#E9B34A}
.stars button:active{transform:scale(1.2)}
.stars.lock button{pointer-events:none}

/* toast */
#toasts{position:fixed;left:0;right:0;bottom:calc(90px + env(safe-area-inset-bottom));z-index:300;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}
.toast{background:var(--esp);color:#F6EEDD;border-radius:99px;padding:.6rem 1.3rem;font-size:.9rem;box-shadow:0 12px 30px rgba(36,27,18,.35);animation:tIn .35s cubic-bezier(.3,1.3,.6,1);pointer-events:none;max-width:92vw;text-align:center}
@keyframes tIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.toast.out{opacity:0;transition:opacity .4s}

body{background:var(--ivory)}
#loApp:not(.lo-hide){display:flex;overflow:hidden}
#loApp>.am-side{flex:0 0 205px;width:205px;height:100%;overflow-y:auto;background:#30271f;color:#f7eddc;padding:25px 14px}
.am-mark{font:36px Georgia,serif;color:#d7b176;text-align:center;margin-bottom:30px}.am-mark small{display:block;font:italic 18px Georgia,serif;color:#f7eddc;margin-top:8px}
.am-menu{position:static;display:flex;flex-direction:column;gap:12px;background:none;padding:0}
.am-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:50px;padding:12px;border:0;border-radius:12px;background:transparent;color:#f7eddc;font:inherit;cursor:pointer;text-align:left}
.am-menu button.active{background:#b8894a;color:white}.am-menu button:disabled{opacity:.4;cursor:not-allowed}.am-home{color:#e6cfab;margin:20px 12px}
.am-workspace{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;overflow:hidden}
#loApp .am-workspace>.lo-head{position:relative;flex:0 0 auto;top:auto;padding:16px 24px}
#loApp .am-workspace>.lo-body{width:100%;max-width:none;margin:0;flex:1;min-height:0;overflow-y:auto;padding:26px 28px 50px}
.am-title{font:30px 'Fraunces',Georgia,serif;margin:0 0 22px;color:var(--esp)}
#loApp .stats{gap:18px;margin-bottom:24px}#loApp .stat{padding:22px;text-align:left;border-radius:16px;border:1px solid #eadcc8}
#loApp #list{background:white;border:1px solid #eadcc8;border-radius:16px;padding:5px 18px}#loApp #list .cust{border-radius:0;box-shadow:none;margin:0;padding:18px 8px;border-bottom:1px solid #eee5d8}
#amCheckinPage{flex:1;min-height:0;overflow:hidden}#amCheckinFrame{display:block;width:100%;height:100%;border:0;background:var(--ivory)}
@media(max-width:800px){#loApp>.am-side{flex-basis:72px;width:72px;padding:20px 8px}.am-mark{font-size:25px}.am-mark small,.am-menu button span{display:none}.am-menu button{justify-content:center;padding:10px;font-size:22px}.am-home{font-size:11px;margin:15px 0}#loApp .am-workspace>.lo-body{padding:20px 14px 45px}}
@media(max-width:520px){#loApp>.am-side{flex-basis:58px;width:58px;padding:18px 4px}#loApp .am-workspace>.lo-head{padding:12px 8px}#loApp .stats{gap:6px}#loApp .stat{padding:12px 5px;text-align:center}#loApp .stat span{font-size:9px}#loApp #list{padding:4px 8px}#loApp #list .cust{flex-wrap:wrap}}

/* ===== Admin compact navigation + calendar-first layout v2.1 ===== */
#loApp.am-layout-ready > .am-side {
  flex:0 0 184px !important;width:184px !important;padding:8px 8px !important;
  display:flex;flex-direction:column;gap:6px;overflow-x:hidden;
}
#loApp.am-layout-ready.am-nav-compact > .am-side {flex-basis:58px !important;width:58px !important;padding:6px !important;}
#loApp.am-layout-ready .am-mark {font-size:26px !important;line-height:1.1;margin:2px 0 10px !important;}
#loApp.am-layout-ready .am-mark small {display:block !important;font-size:13px;margin-top:5px;}
#loApp.am-nav-compact .am-mark {font-size:22px !important;margin:2px 0 10px !important;}
#loApp.am-nav-compact .am-mark small {display:none !important;}
#amSidebarToggle {display:flex;align-items:center;justify-content:center;align-self:flex-end;flex:0 0 auto;width:32px;height:30px;min-height:30px;padding:3px;border:1px solid #d7b17666;border-radius:6px;background:transparent;color:#f7eddc;cursor:pointer;}
#loApp.am-nav-compact #amSidebarToggle {align-self:center;}
#loApp.am-layout-ready .am-menu {gap:6px !important;}
#loApp.am-layout-ready .am-menu > button,
#loApp.am-layout-ready .am-menu > a {
  display:flex !important;align-items:center;justify-content:flex-start !important;gap:11px;
  min-height:42px !important;padding:9px 10px !important;font-size:14px !important;
  width:100%;margin:0 !important;box-sizing:border-box;border-radius:8px;text-decoration:none;
}
#loApp.am-layout-ready .am-menu > a {margin-top:12px !important;}
#loApp.am-layout-ready .am-menu .am-nav-icon {display:inline-flex !important;flex:0 0 22px;align-items:center;justify-content:center;}
#loApp.am-layout-ready .am-menu .am-nav-icon svg {display:block;width:21px;height:21px;}
#loApp.am-layout-ready .am-menu .am-nav-label {display:inline !important;line-height:1.25;white-space:nowrap;}
#loApp.am-nav-compact .am-menu > button,
#loApp.am-nav-compact .am-menu > a {justify-content:center !important;gap:0;padding:9px 0 !important;}
#loApp.am-nav-compact .am-menu .am-nav-label {display:none !important;}
#amSidebarToggle:focus-visible,#loApp .am-menu > button:focus-visible,#loApp .am-menu > a:focus-visible {outline:2px solid #e9c88f;outline-offset:2px;}
#loApp .am-workspace > .lo-head {
  height:36px;min-height:36px;flex:0 0 36px !important;padding:3px 12px !important;gap:6px;
}
#loApp .am-workspace > .lo-head .brand {font-size:15px;line-height:1.2;}
#loApp .am-workspace > .lo-head #loOut {min-height:26px;height:26px;padding:3px 10px;font-size:12px;line-height:1.2;}
#loApp #anCalendarPage:not([hidden]) {
  display:flex !important;flex-direction:column;flex:1;min-height:0;min-width:0;
  padding:6px 8px 4px !important;overflow:hidden !important;
}
#loApp #anCalendarPage .ac-toolbar {flex:0 0 auto;gap:5px;margin-bottom:6px;}
#loApp #anCalendarPage .ac-title {font-size:19px;line-height:1.2;margin:0 6px 0 0;}
#loApp #anCalendarPage .ac-toolbar .ac-btn,
#loApp #anCalendarPage .ac-toolbar input,
#loApp #anCalendarPage .ac-toolbar select {
  min-height:32px !important;height:32px !important;padding:4px 8px !important;
  font-size:12px !important;line-height:1.25;border-radius:5px;
}
#loApp #anCalendarPage #anCalDate {width:140px;}
#loApp #anCalendarPage .ac-scroll {
  flex:1 1 0 !important;min-height:0 !important;max-height:none !important;
  height:auto !important;overflow:auto;
}
#loApp #anCalendarPage .ac-head {height:48px;gap:2px;font-size:11px;}
#loApp #anCalendarPage .ac-avatar {width:22px;height:22px;font-size:10px;}
#loApp #anCalendarPage .ac-avatar small {font-size:9px;right:-8px;top:-3px;}
#loApp #anCalendarPage .ac-time {font-size:10px;white-space:nowrap;padding-right:5px;}
#loApp #anCalendarPage .ac-total {padding:6px 8px;font-size:11px;}
#loApp #anCalendarPage > .ac-note {flex:0 0 auto;font-size:10px;line-height:1.25;margin:4px 0 0;}
#loApp #anCalendarPage > .ac-error {flex:0 0 auto;margin:0 0 5px;font-size:12px;}
#loApp #anCalendarPage > .ac-error:empty {display:none;}
@media(max-width:900px) {
  #loApp #anCalendarPage .ac-title {display:none;}
  #loApp #anCalendarPage .ac-toolbar .ac-spacer {display:none;}
}
@media(max-width:650px) {
  #loApp.am-layout-ready:not(.am-nav-compact) > .am-side {flex-basis:164px !important;width:164px !important;}
  #loApp #anCalendarPage {padding:5px !important;}
  #loApp #anCalendarPage > .ac-note {display:none;}
}