:root{
    --emerald:#0f5132; --emerald-deep:#0a3a24; --emerald-soft:#1a7a4f;
    --gold:#c79a3e; --gold-light:#e3c275; --gold-pale:#f3e7c8;
    --terra:#c0643d; --terra-soft:#d98c63; --terra-deep:#9c4d2c;
    --maroon:#8a1f2b; --maroon-deep:#5e131c; --zgold:#c9a23e; --zgold-light:#e8cd7e;
    --cream:#faf6ee; --cream2:#f4ecdd; --ink:#23281f; --ink2:#5a6356;
    --line:#e6dcc6; --white:#fffdf8;
    --shadow:0 24px 60px -26px rgba(15,81,50,.4);
    --shadow-soft:0 12px 36px -18px rgba(15,81,50,.28);
    --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:'Jost',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
  h1,h2,h3,.display{font-family:'Cormorant Garamond',serif;font-weight:600;line-height:1.07;letter-spacing:-.005em}
  .arabic{font-family:'Amiri',serif}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
  .hidden{display:none!important}
  .motif-line{height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
  .motif-line::after{content:"\2726";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--gold);font-size:13px;background:var(--cream);padding:0 10px}
  header.bar{position:sticky;top:0;z-index:50;background:rgba(250,246,238,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .bar-in{display:flex;align-items:center;justify-content:space-between;height:76px}
  .brand{display:flex;align-items:center;gap:13px;cursor:pointer}
  .brand .crest{width:42px;height:42px;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--emerald),var(--emerald-soft));color:var(--gold-light);font-family:'Amiri',serif;font-size:20px;box-shadow:inset 0 0 0 1.5px var(--gold);border-radius:50% 50% 6px 6px/ 38% 38% 6px 6px}
  .brand b{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;display:block;line-height:1}
  .brand small{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:500}
  nav.links{display:flex;gap:32px;align-items:center}
  nav.links a{font-size:14.5px;color:var(--ink2);font-weight:400;letter-spacing:.02em;transition:color .2s;cursor:pointer}
  nav.links a:hover{color:var(--emerald)}
  .lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;font-size:12.5px;font-weight:500}
  .lang button{border:0;background:none;padding:7px 13px;cursor:pointer;color:var(--ink2);font-family:inherit}
  .lang button.on{background:var(--emerald);color:var(--gold-light)}
  .btn{display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;font-family:inherit;font-weight:500;letter-spacing:.02em;border-radius:999px;transition:transform .15s,box-shadow .2s,background .2s}
  .btn:active{transform:translateY(1px)}
  .btn-em{background:var(--emerald);color:var(--gold-light);padding:13px 28px;font-size:15px;box-shadow:0 12px 28px -12px var(--emerald)}
  .btn-em:hover{background:var(--emerald-deep)}
  .btn-gold{background:var(--gold);color:#fff;padding:14px 30px;font-size:16px}
  .btn-gold:hover{background:#b5882f}
  .btn-ghost{background:transparent;border:1.5px solid currentColor;padding:12px 26px;font-size:15px}
  .hero{position:relative;min-height:90vh;display:flex;align-items:center;overflow:hidden;background:linear-gradient(160deg,var(--emerald-deep),var(--emerald) 60%,var(--emerald-soft))}
  .hero .glow{position:absolute;inset:0;opacity:.6;background:radial-gradient(ellipse at 72% 28%,rgba(227,194,117,.3),transparent 50%),radial-gradient(ellipse at 18% 78%,rgba(26,122,79,.5),transparent 50%)}
  .hero .moon{position:absolute;top:13%;right:13%;width:96px;height:96px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#fff7e4,var(--gold-light));box-shadow:0 0 70px 14px rgba(227,194,117,.4)}
  .hero .moon::before{content:"";position:absolute;top:-6%;right:-14%;width:96px;height:96px;border-radius:50%;background:var(--emerald)}
  .hero .band{position:absolute;left:0;right:0;bottom:0;height:64px;background-image:repeating-linear-gradient(45deg,rgba(227,194,117,.14) 0 14px,transparent 14px 28px);border-top:1px solid rgba(227,194,117,.25)}
  .hero-in{position:relative;z-index:2;color:#fff;max-width:1180px;margin:0 auto;padding:0 24px;width:100%}
  .salam-arabic{font-family:'Amiri',serif;font-size:21px;color:var(--gold-light);margin-bottom:10px;opacity:.72;letter-spacing:.06em}
  .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:var(--gold-light);margin-bottom:20px}
  .eyebrow::before{content:"\2726";font-size:10px}
  .hero h1{font-size:clamp(44px,7.5vw,92px);font-weight:600;max-width:14ch;color:#fff}
  .hero p.lead{font-size:clamp(17px,2vw,21px);max-width:48ch;margin:24px 0 36px;color:rgba(255,255,255,.88);font-weight:300}
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap}
  .hero .btn-ghost{color:var(--gold-light);border-color:rgba(227,194,117,.55)}
  .hero .btn-ghost:hover{background:var(--gold-light);color:var(--emerald-deep)}
  .halal-strip{background:var(--emerald-deep);color:var(--gold-pale);padding:18px 0}
  .halal-in{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;font-size:14.5px}
  .halal-in span{display:flex;align-items:center;gap:9px;font-weight:300}
  .halal-in b{color:var(--gold-light);font-weight:500}
  section{padding:100px 0}
  .sec-head{max-width:660px;margin:0 auto 56px;text-align:center}
  .sec-head .eyebrow{color:var(--gold);justify-content:center;display:flex}
  .sec-head h2{font-size:clamp(32px,5vw,52px);color:var(--emerald)}
  .sec-head p{margin-top:16px;font-size:18px;color:var(--ink2)}
  .prop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:28px}
  .prop{background:var(--white);border:1px solid var(--line);border-radius:6px 6px 20px 20px;overflow:hidden;transition:transform .25s,box-shadow .25s;position:relative}
  .prop.live{cursor:pointer}
  .prop.live:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
  .prop-photo{aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:flex-start;color:#fff;padding:22px;position:relative}
  .prop-photo .ph-label{position:absolute;top:14px;right:14px;font-size:11.5px;background:rgba(0,0,0,.2);padding:5px 11px;border-radius:999px;letter-spacing:.05em}
  .prop-photo h3{font-size:27px;position:relative;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.3)}
  .ph-hotel{background:linear-gradient(150deg,var(--emerald),var(--emerald-soft))}
  .ph-rest{background:linear-gradient(150deg,#7a4a1f,var(--gold))}
  .prop-body{padding:22px 24px 26px}
  .prop-body .loc{font-size:14px;color:var(--ink2);display:flex;align-items:center;gap:6px;margin-bottom:14px}
  .prop-body .tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .tag{font-size:12px;background:var(--cream2);color:var(--ink2);padding:5px 12px;border-radius:999px;font-weight:400}
  .tag.halal{background:var(--emerald);color:var(--gold-light);font-weight:500}
  .prop-body .foot{display:flex;align-items:center;justify-content:space-between}
  .price-from{font-size:13px;color:var(--ink2)}
  .price-from b{font-family:'Cormorant Garamond',serif;font-size:25px;color:var(--emerald);display:block;font-weight:600}
  .arrow{font-size:21px;color:var(--gold)}
  .soon-badge{position:absolute;inset:0;background:rgba(15,81,50,.55);display:flex;align-items:center;justify-content:center;color:var(--gold-light);font-family:'Cormorant Garamond',serif;font-size:22px;letter-spacing:.05em;z-index:3}
  .room-list{display:flex;flex-direction:column;gap:28px}
  .room{display:grid;grid-template-columns:1.05fr 1.4fr;background:var(--white);border:1px solid var(--line);border-radius:6px 20px 20px 6px;overflow:hidden}
  .room:nth-child(even){grid-template-columns:1.4fr 1.05fr;border-radius:20px 6px 6px 20px}
  .room:nth-child(even) .room-photo{order:2}
  .room-photo{min-height:300px;display:flex;align-items:flex-end;padding:22px;color:#fff;background:linear-gradient(150deg,var(--emerald),var(--emerald-soft))}
  .room:nth-child(2) .room-photo{background:linear-gradient(150deg,var(--emerald-deep),var(--emerald))}
  .room:nth-child(3) .room-photo{background:linear-gradient(150deg,#6e5526,var(--gold))}
  .room-photo .ph-label{font-size:12px;background:rgba(0,0,0,.2);padding:5px 12px;border-radius:999px}
  .room-info{padding:38px}
  .room-info h3{font-size:31px;color:var(--emerald);margin-bottom:8px}
  .room-info .sub{color:var(--ink2);font-size:15px;margin-bottom:20px}
  .room-feats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
  .feat{font-size:13.5px;display:flex;align-items:center;gap:7px;color:var(--ink2);background:var(--cream2);padding:8px 14px;border-radius:10px}
  .room-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:22px;flex-wrap:wrap;gap:14px}
  .room-price b{font-family:'Cormorant Garamond',serif;font-size:32px;color:var(--emerald);font-weight:600}
  .room-price small{color:var(--ink2);font-size:14px}
  .halal-feat{background:var(--emerald);color:#fff;position:relative;overflow:hidden}
  .halal-feat .glow{position:absolute;inset:0;opacity:.5;background:radial-gradient(ellipse at 80% 20%,rgba(227,194,117,.25),transparent 50%)}
  .halal-feat .sec-head h2{color:#fff}
  .halal-feat .sec-head .eyebrow{color:var(--gold-light)}
  .halal-feat .sec-head p{color:rgba(255,255,255,.85)}
  .hf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px;position:relative;z-index:2}
  .hf-card{background:rgba(255,255,255,.06);border:1px solid rgba(227,194,117,.25);border-radius:6px 6px 18px 18px;padding:30px 26px;text-align:center}
  .hf-card .ic{font-size:34px;margin-bottom:14px}
  .hf-card h3{font-size:22px;color:var(--gold-light);margin-bottom:8px}
  .hf-card p{font-size:14.5px;color:rgba(255,255,255,.82);font-weight:300}
  .book-wrap{background:var(--white);border:1px solid var(--line);border-radius:6px 6px 24px 24px;padding:54px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
  .book-wrap::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold))}
  .book-wrap h2{font-size:38px;color:var(--emerald)}
  .book-wrap p.note{color:var(--ink2);margin:12px 0 32px;max-width:54ch}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .fld{display:flex;flex-direction:column;gap:7px}
  .fld.full{grid-column:1/-1}
  .fld label{font-size:13.5px;font-weight:400;color:var(--ink2)}
  .fld input,.fld select{font-family:inherit;font-size:16px;padding:14px 16px;border-radius:10px;border:1.5px solid var(--line);background:var(--cream);color:var(--ink);outline:none;transition:border .2s,background .2s}
  .fld input:focus,.fld select:focus{border-color:var(--gold);background:#fff}
  .book-submit{grid-column:1/-1;margin-top:6px}
  .book-submit .btn{width:100%;justify-content:center;padding:17px;font-size:17px}
  .reassure{grid-column:1/-1;font-size:13.5px;color:var(--ink2);display:flex;align-items:center;gap:9px;margin-top:2px}
  .confirm{background:var(--white);border:1px solid var(--line);border-radius:24px;padding:54px;text-align:center;box-shadow:var(--shadow)}
  .confirm .check{width:76px;height:76px;border-radius:50%;background:var(--emerald);color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-size:38px;margin:0 auto 20px}
  .confirm h2{font-size:34px;color:var(--emerald);margin-bottom:12px}
  .confirm p{color:var(--ink2);max-width:48ch;margin:0 auto 8px}
  footer{background:var(--emerald-deep);color:rgba(255,255,255,.8);padding:70px 0 40px}
  .foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:46px}
  footer .crest{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:var(--gold-light);font-family:'Amiri',serif;font-size:20px;border:1px solid rgba(227,194,117,.3);border-radius:50% 50% 6px 6px/ 38% 38% 6px 6px;margin-bottom:14px}
  footer h4{color:var(--gold-light);font-family:'Cormorant Garamond',serif;font-size:21px;margin-bottom:10px;font-weight:600}
  footer .muted{font-size:14.5px;font-weight:300;max-width:40ch;color:rgba(255,255,255,.7)}
  footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
  footer .copy{border-top:1px solid rgba(227,194,117,.18);padding-top:24px;font-size:13.5px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
  .breadcrumb{font-size:14px;color:var(--ink2);padding:26px 0 0;display:flex;gap:8px;align-items:center}
  .breadcrumb a{color:var(--gold);cursor:pointer}
  @media(max-width:760px){
    nav.links{display:none}
    .room,.room:nth-child(even){grid-template-columns:1fr;border-radius:18px}
    .room:nth-child(even) .room-photo{order:0}
    .form-grid{grid-template-columns:1fr}
    .foot-grid{grid-template-columns:1fr}
    .book-wrap,.confirm{padding:32px 24px}
    section{padding:64px 0}
  }

  /* ============ HIỆU ỨNG SANG TRỌNG ============ */
  /* 1. Page-load: phần tử hiện lên mượt theo thứ tự (staggered) */
  @keyframes riseIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadeIn{from{opacity:0}to{opacity:1}}
  .hero-in > *{opacity:0;animation:riseIn .9s var(--ease) forwards}
  .hero-in > *:nth-child(1){animation-delay:.15s}
  .hero-in > *:nth-child(2){animation-delay:.30s}
  .hero-in > *:nth-child(3){animation-delay:.45s}
  .hero-in > *:nth-child(4){animation-delay:.60s}
  .hero-in > *:nth-child(5){animation-delay:.75s}

  /* 2. Scroll reveal: các khối hiện khi cuộn tới */
  .reveal{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.1s}.reveal.d2{transition-delay:.2s}.reveal.d3{transition-delay:.3s}

  /* 3. Nền động hero: đốm sáng vàng trôi chậm + lớp grain mờ */
  @keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}100%{transform:translate(0,0) scale(1)}}
  .hero .glow{animation:drift 14s ease-in-out infinite}
  .hero .glow.g2{animation:drift 18s ease-in-out infinite reverse;background:radial-gradient(circle,rgba(192,100,61,.3),transparent 65%);top:auto;bottom:-140px;left:-100px;right:auto}
  .hero::after{content:"";position:absolute;inset:0;opacity:.04;pointer-events:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

  /* 4. Shimmer vàng chạy qua khi hover (nút & thẻ) */
  .btn-gold,.btn-em{position:relative;overflow:hidden}
  .btn-gold::after,.btn-em::after{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
  .btn-gold:hover::after,.btn-em:hover::after{left:140%}

  /* 5. Hover nâng cao cho thẻ phòng/khách sạn */
  .prop,.room{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
  .prop:hover{transform:translateY(-10px);box-shadow:var(--shadow)}
  .prop .photo,.room-photo{overflow:hidden}
  .prop .photo .ph-img,.room-photo .ph-img{transition:transform .7s var(--ease)}
  .prop:hover .photo .ph-img,.room:hover .room-photo .ph-img{transform:scale(1.07)}

  /* 6. Tiêu đề lớn có gạch chân vàng kim vẽ dần khi hiện */
  .sec-head h2{position:relative;display:inline-block}
  .sec-head h2::after{content:"";position:absolute;left:0;bottom:-10px;height:2px;width:0;
    background:linear-gradient(90deg,var(--gold),var(--terra-soft));transition:width 1s var(--ease) .3s}
  .reveal.in .sec-head h2::after,.sec-head.in h2::after{width:64px}

  /* 7. Viền terracotta tinh tế cho một số điểm nhấn */
  .accent-terra{color:var(--terra)}
  .accent-maroon{color:var(--maroon)}
  .btn-terra{background:var(--terra);color:#fff;padding:13px 28px;font-size:14.5px;font-weight:500;border-radius:999px}
  .btn-terra:hover{background:var(--terra-deep)}
  .tag.t-terra{border-color:var(--terra-soft);color:var(--terra-deep);background:#faf0ea}

  /* 8. Link nav có gạch chân trượt */
  nav.links a{position:relative}
  nav.links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1.5px;background:var(--gold);transition:width .3s var(--ease)}
  nav.links a:hover::after{width:100%}

  /* tôn trọng người tắt chuyển động */
  @media(prefers-reduced-motion:reduce){
    *,*::after,*::before{animation:none!important;transition:none!important}
    .reveal{opacity:1;transform:none}
  }

  /* ============ EXPERIENCE / quote ============ */
  .quote-band{background:linear-gradient(150deg,var(--emerald-deep),var(--emerald));color:var(--cream);text-align:center;border-radius:14px;padding:64px 40px;position:relative;overflow:hidden}
  .quote-band .pattern{position:absolute;inset:0;opacity:.08;background-image:radial-gradient(circle at 50% 50%,var(--gold) 1.5px,transparent 1.6px);background-size:26px 26px}
  .quote-band .mark{font-family:'Cormorant Garamond',serif;font-size:80px;line-height:.5;color:var(--gold-light);opacity:.5}
  .quote-band p{font-family:'Cormorant Garamond',serif;font-size:clamp(24px,3.4vw,38px);font-weight:500;max-width:22ch;margin:14px auto 0;line-height:1.3;position:relative}
  .quote-band .by{margin-top:22px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light);font-weight:500}
  .exp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:8px}
  .exp{text-align:center;padding:10px}
  .exp .en{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--gold);color:var(--emerald);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 18px;background:var(--white)}
  .exp h3{font-size:23px;color:var(--emerald);margin-bottom:8px}
  .exp p{font-size:14.5px;color:var(--ink2);max-width:32ch;margin:0 auto}
  @media(max-width:760px){.exp-grid{grid-template-columns:1fr;gap:24px}.quote-band{padding:44px 24px}}

  /* ============ GALLERY SLIDER ============ */
  .photo-em{background:linear-gradient(150deg,var(--emerald),var(--emerald-soft))}
  .photo-em2{background:linear-gradient(150deg,#0a3a24,#147a4a 70%,#1a7a4f)}
  .photo-gold{background:linear-gradient(150deg,var(--gold),#d8b25a)}
  .photo-gold2{background:linear-gradient(150deg,#a07d35,var(--gold-light))}
  .photo-terra{background:linear-gradient(150deg,var(--terra-deep),var(--terra-soft))}
  .gallery{position:relative;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-soft);background:var(--emerald-deep)}
  .slides{display:flex;transition:transform .7s var(--ease)}
  .slide{min-width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;color:var(--cream);position:relative}
  .slide span{position:relative;z-index:2;background:rgba(10,58,36,.4);padding:8px 18px;border-radius:999px;font-size:14px;letter-spacing:.04em;backdrop-filter:blur(2px)}
  .slide .corner{position:absolute;top:18px;left:18px;width:38px;height:38px;border:1px solid var(--gold-light);border-radius:50%;opacity:.5;z-index:2}
  .g-arrow{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:rgba(250,246,238,.85);color:var(--emerald);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .2s,transform .2s;box-shadow:0 4px 14px rgba(0,0,0,.18)}
  .g-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)}
  .g-arrow.prev{left:16px}.g-arrow.next{right:16px}
  .g-dots{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:5}
  .g-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(250,246,238,.5);cursor:pointer;padding:0;transition:width .3s,background .3s}
  .g-dots button.on{width:26px;border-radius:999px;background:var(--gold-light)}
  .g-cap{margin-top:16px;text-align:center;font-size:14px;color:var(--ink2);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:18px}

  /* ============ MAP & directions ============ */
  .map-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft);background:var(--white)}
  .map-frame{position:relative;min-height:420px}
  .map-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(1.05)}
  .map-side{padding:40px;display:flex;flex-direction:column;justify-content:center;gap:24px;background:var(--cream)}
  .place{border-left:3px solid var(--gold);padding-left:18px}
  .place .pk{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep,#9c7a30);font-weight:600;margin-bottom:5px}
  .place h3{font-size:24px;color:var(--emerald);margin-bottom:5px}
  .place p{font-size:14px;color:var(--ink2);margin-bottom:14px}
  .place.zeytun{border-left-color:var(--terra)}
  .place.zeytun .pk{color:var(--terra-deep)}
  .map-tabs{display:flex;gap:8px;margin-bottom:4px}
  .map-tab{flex:1;border:1px solid var(--line);background:var(--white);padding:11px;border-radius:10px;cursor:pointer;font-family:'Jost',sans-serif;font-size:14px;font-weight:500;color:var(--ink2);transition:all .25s}
  .map-tab.on{background:var(--emerald);color:var(--gold-light);border-color:var(--emerald)}
  .map-tab.on.zeytun-tab{background:var(--terra);color:#fff;border-color:var(--terra)}
  @media(max-width:760px){
    .map-grid{grid-template-columns:1fr}
    .map-frame{min-height:300px}
    .g-arrow{width:40px;height:40px;font-size:18px}
  }

  /* ============ TRANG ZEYTUN (đỏ đô + vàng kim, nền kem) ============ */
  .hero-z{background:linear-gradient(155deg,var(--maroon-deep),var(--maroon) 62%,#a82835)}
  .hero-z .glow{background:radial-gradient(circle,rgba(232,205,126,.4),transparent 65%)}
  .hero-z .glow.g2{background:radial-gradient(circle,rgba(201,162,62,.3),transparent 65%)}
  .hero-z .salam-arabic{color:var(--zgold-light)}
  .hero-z .eyebrow{color:var(--zgold-light)}.hero-z .eyebrow::before{background:var(--zgold)}
  .hero-z h1 em{color:var(--zgold-light)}
  .z-split{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
  .z-split .z-half{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
  .z-split .z-rest{background:linear-gradient(150deg,var(--maroon),#a82835);color:#fff}
  .z-split .z-stay{background:var(--emerald);color:#fff}
  .z-half .z-floor{font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;opacity:.85;margin-bottom:10px;color:var(--zgold-light)}
  .z-split .z-stay .z-floor{color:var(--gold-light)}
  .z-half h3{font-size:30px;color:#fff;margin-bottom:12px}
  .z-half p{font-size:15px;opacity:.92;margin-bottom:22px;line-height:1.7}
  .z-half .btn{align-self:flex-start;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4)}
  .z-half .btn:hover{background:#fff;color:var(--maroon)}

  /* ===== MENU SÁCH 2 TRANG (desktop) / 1 trang (mobile) ===== */
  .book{max-width:880px;margin:0 auto;position:relative;perspective:2800px}
  .book-inner{position:relative;width:100%;aspect-ratio:7/5;transform-style:preserve-3d;
    box-shadow:0 30px 70px -28px rgba(94,19,28,.5);border-radius:8px}
  /* nền giấy chung + gáy giữa */
  .book-inner::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
    background:linear-gradient(180deg,transparent,rgba(94,19,28,.25),transparent);z-index:30;pointer-events:none}
  .leaf{position:absolute;top:0;right:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;
    transition:transform 1.4s cubic-bezier(.34,.05,.2,1);will-change:transform;cursor:pointer}
  .leaf.flipped{transform:rotateY(-180deg)}
  .face{position:absolute;inset:0;backface-visibility:hidden;background:var(--cream);overflow:hidden;
    display:flex;flex-direction:column;padding:46px 42px}
  .face.back{transform:rotateY(180deg)}
  /* viền trang + texture */
  .face::before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,162,62,.45);border-radius:3px;pointer-events:none;z-index:4}
  .face .grain{position:absolute;inset:0;opacity:.5;pointer-events:none;
    background:radial-gradient(circle at 50% 0,rgba(201,162,62,.06),transparent 60%)}
  /* lớp bóng/sáng động: tối ở gáy, sáng lướt qua khi trang nâng lên (mềm như giấy cong) */
  .face .gloss{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:inherit;
    background:linear-gradient(90deg,rgba(94,19,28,.22) 0%,rgba(94,19,28,.05) 14%,rgba(255,255,255,0) 38%,rgba(255,255,255,.14) 70%,rgba(255,255,255,.28) 100%);
    opacity:0;transition:opacity 1.4s ease}
  /* mặt sau (trang trái) thì bóng quét ngược lại */
  .face.back .gloss{background:linear-gradient(90deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,.14) 30%,rgba(255,255,255,0) 62%,rgba(94,19,28,.05) 86%,rgba(94,19,28,.22) 100%)}
  .leaf.turning .gloss{opacity:1}
  /* bóng gáy: trang phải tối dần về trái, trang trái tối dần về phải */
  .face.rightpg{box-shadow:inset 22px 0 40px -30px rgba(94,19,28,.5);border-radius:0 8px 8px 0}
  .face.leftpg{box-shadow:inset -22px 0 40px -30px rgba(94,19,28,.5);border-radius:8px 0 0 8px}
  /* trang trái cố định (nằm dưới, lộ ra khi tờ lật) */
  .left-static{position:absolute;top:0;left:0;width:50%;height:100%;background:var(--cream);overflow:hidden;
    display:flex;flex-direction:column;padding:46px 42px;z-index:1}
  .left-static::before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,162,62,.45);border-radius:3px 0 0 3px;pointer-events:none}
  .left-static.leftpg{box-shadow:inset -22px 0 40px -30px rgba(94,19,28,.5);border-radius:8px 0 0 8px}

  /* nội dung trang */
  .mp-ar{font-family:'Amiri',serif;font-size:17px;color:var(--zgold);opacity:.75;text-align:center;margin-bottom:2px}
  .mp-cat{font-family:'Jost',sans-serif;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--zgold);font-weight:600;margin-bottom:20px;text-align:center}
  .mp-cat .cat-sub{display:block;font-size:11px;letter-spacing:.14em;color:var(--ink2);font-weight:500;margin-top:3px}
  .mp-cat .cat-ar{display:block;font-family:'Amiri',serif;font-size:16px;color:var(--zgold);letter-spacing:0;text-transform:none;margin-top:2px;opacity:.85}
  .mp-cat::after{content:"";display:block;width:36px;height:1px;background:var(--zgold);margin:10px auto 0;opacity:.7}
  .menu-row{margin-bottom:15px}
  .menu-item{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
  .menu-item .mi-name{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;color:var(--ink);white-space:nowrap}
  .menu-item .mi-dot{flex:1;border-bottom:1.5px dotted var(--zgold);opacity:.6;transform:translateY(-4px)}
  .menu-item .mi-price{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;color:var(--maroon);white-space:nowrap}
  .mi-sub{font-size:12px;color:var(--ink2);margin-bottom:3px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
  .mi-sub .mi-vi{}
  .mi-sub .mi-ar{font-family:'Amiri',serif;font-size:14px;color:var(--zgold);margin-left:auto}
  .mi-desc{font-size:12px;color:var(--ink2);padding-right:20px;opacity:.85}
  .page-num{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:'Cormorant Garamond',serif;font-size:14px;color:var(--zgold);letter-spacing:.1em}
  .page-num b{color:var(--maroon);font-weight:600}
  /* trang bìa & trang cuối (mặt trong bìa) */
  .face.cover{background:
      radial-gradient(ellipse at 50% 18%,rgba(232,205,126,.16),transparent 55%),
      linear-gradient(150deg,var(--maroon-deep),var(--maroon) 68%,#a82835);
    color:#fff;align-items:center;justify-content:center;text-align:center}
  .face.cover::before{border-color:rgba(232,205,126,.55);inset:14px}
  /* khung viền kép trang trí */
  .cover-frame{position:absolute;inset:24px;border:1px solid rgba(232,205,126,.35);border-radius:2px;pointer-events:none;z-index:2}
  .cover-frame::before,.cover-frame::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--zgold-light);opacity:.8}
  .cover-frame::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
  .cover-frame::after{bottom:-1px;right:-1px;border-left:none;border-top:none}
  .cover-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
  .face.cover .ar{font-family:'Amiri',serif;font-size:34px;color:var(--zgold-light);margin-bottom:6px;text-shadow:0 1px 8px rgba(0,0,0,.25)}
  .face.cover .olive{font-size:26px;color:var(--zgold-light);margin-bottom:12px;opacity:.9}
  .face.cover h3{font-family:'Cormorant Garamond',serif;font-size:46px;font-weight:700;color:#fff;margin-bottom:4px;letter-spacing:.01em}
  .face.cover .tagline{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;color:var(--zgold-light);margin-bottom:18px;opacity:.92}
  .face.cover .deco{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--zgold-light);font-size:12px;letter-spacing:.18em;text-transform:uppercase}
  .face.cover .deco::before,.face.cover .deco::after{content:"";height:1px;width:32px;background:var(--zgold-light);opacity:.7}
  .face.cover .est{margin-top:14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--zgold-light);opacity:.7}
  .face.cover .open-hint{position:absolute;bottom:34px;left:0;right:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--zgold-light);opacity:.8;z-index:3}
  .face.cover .open-hint::before{content:"";display:block;width:1px;height:18px;background:var(--zgold-light);opacity:.5;margin:0 auto 12px}
  .face.endpg{align-items:center;justify-content:center;text-align:center;color:var(--ink2)}
  .face.endpg .ar{font-family:'Amiri',serif;font-size:24px;color:var(--zgold);margin-bottom:10px}
  .face.endpg h3{font-family:'Cormorant Garamond',serif;font-size:26px;color:var(--maroon);margin-bottom:6px}
  .book-hint{text-align:center;font-size:12px;color:var(--ink2);opacity:.6;margin-top:16px;letter-spacing:.03em}

  /* MOBILE: 1 trang dọc, bỏ hiệu ứng sách, hiện dạng cuộn từng trang */
  @media(max-width:760px){
    .book{max-width:100%}
    .book-inner{aspect-ratio:auto;height:auto;box-shadow:none}
    .book-inner::after{display:none}
    .left-static{display:none}
    .leaf{position:relative;width:100%;height:auto;transform:none!important;transition:none;cursor:default}
    .face{position:relative;inset:auto;transform:none!important;backface-visibility:visible;border-radius:10px;
      border:1px solid var(--zgold);margin-bottom:16px;min-height:auto;padding:34px 26px;box-shadow:var(--shadow-soft)!important}
    .face.back{display:flex}
    .face.rightpg,.face.leftpg{box-shadow:var(--shadow-soft)!important;border-radius:10px}
    .face.cover{margin-bottom:16px}
    .book-hint{display:none}
  }
  .rent-list{display:flex;flex-direction:column;gap:24px}
  .rent{display:grid;grid-template-columns:1fr 1.3fr;background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
  .rent .rent-img{min-height:220px;display:flex;align-items:flex-end;padding:20px;color:#fff;background:linear-gradient(150deg,var(--emerald),var(--emerald-soft))}
  .rent .rent-info{padding:30px}
  .rent .rent-info h4{font-size:24px;color:var(--emerald);margin-bottom:6px}
  .rent .rent-feats{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0}
  .btn-maroon{background:var(--maroon);color:#fff;padding:13px 28px;font-size:14.5px;font-weight:500;border-radius:999px}
  .btn-maroon:hover{background:var(--maroon-deep)}
  @media(max-width:760px){
    .z-split{grid-template-columns:1fr}
    .z-split .z-half{padding:34px 26px}
    .rent{grid-template-columns:1fr}
    .menu-book{max-width:100%}
    .mpage{padding:34px 26px}
    .mpage.cover h3{font-size:34px}
  }

  /* ============ TESTIMONIALS ============ */
  .testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
  .testi{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:30px 28px;position:relative;transition:transform .3s,box-shadow .3s}
  .testi:hover{transform:translateY(-5px);box-shadow:var(--shadow-soft)}
  .testi .stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:14px}
  .testi .quote{font-family:'Cormorant Garamond',serif;font-size:19px;line-height:1.5;color:var(--ink);margin-bottom:20px}
  .testi .who{display:flex;align-items:center;gap:12px}
  .testi .ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(150deg,var(--emerald),var(--emerald-soft));color:var(--gold-light);display:flex;align-items:center;justify-content:center;font-weight:600;font-family:'Cormorant Garamond',serif;font-size:19px}
  .testi .who .nm{font-weight:500;color:var(--emerald);font-size:15px}
  .testi .who .ctry{font-size:13px;color:var(--ink2)}

  /* ============ NEARBY ============ */
  .near-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px}
  .near{display:flex;align-items:center;gap:15px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:18px 20px;transition:transform .25s}
  .near:hover{transform:translateY(-3px)}
  .near .ni{width:46px;height:46px;border-radius:12px;background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
  .near .nt{font-weight:500;color:var(--emerald);font-size:15.5px}
  .near .nd{font-size:13px;color:var(--ink2);margin-top:2px}

  /* ============ FAQ ============ */
  .faq-wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .faq{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
  .faq summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:500;color:var(--emerald);font-size:16.5px;display:flex;justify-content:space-between;align-items:center;gap:16px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";font-size:24px;color:var(--gold);font-weight:300;transition:transform .3s;flex-shrink:0}
  .faq[open] summary::after{transform:rotate(45deg)}
  .faq .ans{padding:0 24px 22px;color:var(--ink2);font-size:15px;line-height:1.7}

  /* ============ ZEYTUN CONTACT FORM ============ */
  .zform-wrap{background:linear-gradient(150deg,var(--terra-deep),var(--terra));border-radius:12px;padding:54px;color:#fff;position:relative;overflow:hidden}
  .zform-wrap .glow2{position:absolute;top:-80px;right:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(243,231,200,.35),transparent 70%)}
  .zform-wrap h2{font-size:38px;position:relative;color:#fff}
  .zform-wrap p.note{color:rgba(255,255,255,.88);margin:12px 0 30px;max-width:52ch;position:relative}
  .ztabs{display:flex;gap:10px;margin-bottom:22px;position:relative}
  .ztab{border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;padding:11px 22px;border-radius:999px;cursor:pointer;font-family:'Jost',sans-serif;font-size:14.5px;font-weight:500;transition:all .25s}
  .ztab.on{background:#fff;color:var(--terra-deep);border-color:#fff}
  @media(max-width:760px){.zform-wrap{padding:32px 24px}}

  /* ============ HEADER ZEYTUN (đỏ đô + vàng kim) ============ */
  header.zbar{background:rgba(94,19,28,.92)}
  header.zbar .brand .crest{background:linear-gradient(150deg,var(--maroon-deep),var(--maroon));color:var(--zgold-light);box-shadow:inset 0 0 0 1.5px var(--zgold)}
  header.zbar .brand b{color:#fff}
  header.zbar .brand small{color:var(--zgold-light)}
  header.zbar nav.links a{color:rgba(255,255,255,.82)}
  header.zbar nav.links a:hover{color:var(--zgold-light)}
  header.zbar nav.links a::after{background:var(--zgold-light)}
  header.zbar .lang{border-color:rgba(232,205,126,.4)}
  header.zbar .lang button{color:rgba(255,255,255,.8)}
  header.zbar .lang button.on{background:var(--zgold);color:var(--maroon-deep)}
  .btn-zgold{background:var(--zgold);color:var(--maroon-deep);padding:13px 28px;font-size:15px;font-weight:600}
  .btn-zgold:hover{background:var(--zgold-light)}