/* ═══════════════════════════════════════════════════════════════
   MERCURY BEACH HOUSE — Global Styles v3
   Aesthetic: Luxury Coastal Editorial · Dark Ocean · 2025
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  --ink:    #0b1922;
  --deep:   #122030;
  --ocean:  #1a3346;
  --teal:   #2a7d7b;
  --teal2:  #3a9e9b;
  --gold:   #c8a96a;
  --gold2:  #e0c07a;
  --sand:   #f5efe3;
  --warm:   #ede5d5;
  --white:  #ffffff;
  --muted:  #7a8c99;
  --border: rgba(255,255,255,0.07);
  --border-light: rgba(0,0,0,0.07);
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Outfit', system-ui, sans-serif;
  --r: 2px; --r2: 6px;
  --shadow: 0 4px 32px rgba(11,25,34,0.14);
  --shadow-lg: 0 16px 64px rgba(11,25,34,0.22);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --nav-h: 68px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--sans);background:var(--sand);color:var(--ink);overflow-x:hidden;line-height:1.65;padding-top:var(--nav-h);}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:var(--sans);cursor:pointer;border:none;background:none;}
.serif{font-family:var(--serif);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* NAV */
nav#main-nav{position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:200;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(1.2rem,5vw,3.5rem);background:rgba(11,25,34,0.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(200,169,106,0.12);transition:background 0.4s,border-color 0.4s;}
nav#main-nav.scrolled{background:rgba(11,25,34,0.97);border-color:rgba(200,169,106,0.2);}
.nav-logo{font-family:var(--serif);font-size:clamp(1rem,3vw,1.35rem);font-weight:400;letter-spacing:0.06em;white-space:nowrap;color:var(--sand);display:flex;align-items:center;gap:0.5rem;}
.nav-logo-dot{color:var(--gold);}
.nav-links{display:none;gap:2.2rem;list-style:none;}
@media(min-width:820px){.nav-links{display:flex;}}
.nav-links a{font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;font-weight:500;color:rgba(245,239,227,0.6);transition:color 0.25s;position:relative;padding-bottom:2px;}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform 0.3s var(--ease);}
.nav-links a:hover{color:var(--gold);}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left;}
.nav-right{display:flex;align-items:center;gap:0.7rem;}
.nav-lang{font-size:0.67rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(245,239,227,0.4);border:1px solid rgba(245,239,227,0.15);padding:0.32rem 0.75rem;border-radius:var(--r);cursor:pointer;transition:all 0.25s;background:transparent;font-family:var(--sans);}
.nav-lang:hover{color:var(--gold);border-color:rgba(200,169,106,0.4);}
.nav-book{background:var(--gold);color:var(--ink);padding:0.5rem 1.3rem;border-radius:var(--r);font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;transition:all 0.25s;white-space:nowrap;}
.nav-book:hover{background:var(--gold2);transform:translateY(-1px);box-shadow:0 4px 20px rgba(200,169,106,0.3);}
.nav-hamburger{display:flex;flex-direction:column;gap:5px;padding:0.4rem;cursor:pointer;}
@media(min-width:820px){.nav-hamburger{display:none;}}
.nav-hamburger span{display:block;width:22px;height:1.5px;background:rgba(245,239,227,0.75);transition:all 0.3s;}
.nav-hamburger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-drawer{position:fixed;top:var(--nav-h);left:0;right:0;z-index:199;background:rgba(11,25,34,0.98);backdrop-filter:blur(20px);padding:1.8rem clamp(1.2rem,5vw,3.5rem) 2.5rem;transform:translateY(-110%);transition:transform 0.4s var(--ease);border-bottom:1px solid rgba(200,169,106,0.15);}
.nav-drawer.open{transform:translateY(0);}
.nav-drawer ul{list-style:none;display:flex;flex-direction:column;}
.nav-drawer ul a{display:block;padding:1rem 0;font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--sand);border-bottom:1px solid rgba(255,255,255,0.05);transition:color 0.2s,padding-left 0.2s;}
.nav-drawer ul a:hover{color:var(--gold);padding-left:0.4rem;}
.drawer-bottom{margin-top:1.8rem;display:flex;flex-wrap:wrap;gap:0.6rem;}

/* SECTION */
section{padding:clamp(3rem,8vw,6rem) clamp(1.2rem,5vw,4.5rem);}
.section-eyebrow{display:inline-block;font-size:0.62rem;letter-spacing:0.35em;text-transform:uppercase;color:var(--teal);margin-bottom:0.8rem;font-weight:500;}
.section-eyebrow.light{color:rgba(200,169,106,0.7);}
.section-title{font-family:var(--serif);font-size:clamp(2rem,5vw,3.4rem);font-weight:400;line-height:1.1;color:var(--ocean);}
.section-title em{font-style:italic;color:var(--teal);}
.section-title.light{color:var(--sand);}
.section-title.light em{color:var(--gold);}
.divider{width:48px;height:1.5px;background:var(--gold);margin:1.4rem 0;display:block;}
.section-desc{max-width:580px;color:var(--muted);font-size:0.9rem;line-height:1.9;}
.section-desc.light{color:rgba(245,239,227,0.6);}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:0.45rem;font-family:var(--sans);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;padding:0.8rem 1.8rem;border-radius:var(--r);cursor:pointer;transition:all 0.25s;white-space:nowrap;}
.btn-gold{background:var(--gold);color:var(--ink);}
.btn-gold:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,169,106,0.25);}
.btn-ocean{background:var(--ocean);color:var(--sand);}
.btn-ocean:hover{background:var(--deep);transform:translateY(-1px);}
.btn-outline{border:1.5px solid rgba(26,51,70,0.2);color:var(--ocean);}
.btn-outline:hover{border-color:var(--ocean);background:rgba(26,51,70,0.05);}
.btn-outline-light{border:1.5px solid rgba(245,239,227,0.3);color:var(--sand);}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold);}
.btn-glass{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);color:var(--sand);backdrop-filter:blur(8px);}
.btn-glass:hover{background:rgba(255,255,255,0.14);border-color:rgba(200,169,106,0.4);}
.btn-sm{padding:0.5rem 1.1rem;font-size:0.67rem;}

/* CHANNEL BUTTONS */
.channel-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.65rem 1.25rem;border-radius:var(--r2);font-size:0.78rem;font-weight:600;transition:all 0.25s;white-space:nowrap;letter-spacing:0.02em;}
.ch-zalo{background:#0068ff;color:#fff;}
.ch-zalo:hover{background:#0055d4;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,104,255,0.3);}
.ch-fb{background:#1877f2;color:#fff;}
.ch-fb:hover{background:#145fc5;transform:translateY(-2px);box-shadow:0 6px 20px rgba(24,119,242,0.3);}
.ch-wa{background:#25d366;color:#fff;}
.ch-wa:hover{background:#1dba59;transform:translateY(-2px);box-shadow:0 6px 20px rgba(37,211,102,0.3);}
.ch-phone{background:var(--gold);color:var(--ink);}
.ch-phone:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 6px 20px rgba(200,169,106,0.3);}

/* OTA */
.ota-set{display:flex;flex-wrap:wrap;gap:0.5rem;}
.ota-btn{display:inline-flex;align-items:center;gap:0.35rem;padding:0.5rem 1rem;border-radius:var(--r);font-size:0.7rem;letter-spacing:0.06em;font-weight:500;border:1.5px solid;transition:all 0.2s;white-space:nowrap;}
.ota-booking{border-color:#003580;color:#003580;}
.ota-booking:hover{background:#003580;color:#fff;}
.ota-airbnb{border-color:#FF5A5F;color:#FF5A5F;}
.ota-airbnb:hover{background:#FF5A5F;color:#fff;}
.ota-agoda{border-color:#5392d0;color:#5392d0;}
.ota-agoda:hover{background:#5392d0;color:#fff;}
.ota-direct{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:700;}
.ota-direct:hover{background:var(--gold2);border-color:var(--gold2);}

/* ROOM CARDS */
.room-card{background:var(--white);border-radius:var(--r2);overflow:hidden;box-shadow:var(--shadow);transition:transform 0.35s var(--ease),box-shadow 0.35s;display:flex;flex-direction:column;}
.room-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.room-img{position:relative;overflow:hidden;background:#0d1e2a;aspect-ratio:4/3;}
.room-img-bg{position:absolute;inset:0;transition:transform 0.7s var(--ease);}
.room-card:hover .room-img-bg,.room-card:hover .room-img img{transform:scale(1.06);}
.room-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform 0.7s var(--ease),opacity 0.4s;}
.room-badge{position:absolute;top:1rem;left:1rem;z-index:2;background:rgba(11,25,34,0.75);backdrop-filter:blur(8px);color:var(--gold);font-size:0.6rem;letter-spacing:0.15em;text-transform:uppercase;padding:0.3rem 0.8rem;border-radius:20px;font-weight:600;border:1px solid rgba(200,169,106,0.3);}
.room-icon{position:absolute;bottom:1rem;right:1rem;z-index:2;font-size:2.5rem;opacity:0.12;pointer-events:none;transition:opacity 0.3s;}
.room-card:hover .room-icon{opacity:0.22;}
.room-body{padding:1.5rem;flex:1;display:flex;flex-direction:column;}
.room-name{font-family:var(--serif);font-size:1.3rem;font-weight:400;color:var(--ocean);margin-bottom:0.5rem;line-height:1.2;}
.room-name a{transition:color 0.2s;}
.room-name a:hover{color:var(--teal);}
.room-meta{display:flex;flex-wrap:wrap;gap:0.4rem 1rem;font-size:0.71rem;color:var(--muted);margin-bottom:1rem;}
.room-meta span{display:flex;align-items:center;gap:0.25rem;}
.room-price{font-family:var(--serif);font-size:1.6rem;color:var(--teal);font-weight:400;line-height:1;margin-bottom:0.15rem;}
.room-price small{font-family:var(--sans);font-size:0.72rem;color:var(--muted);}
.room-note{font-size:0.74rem;color:var(--muted);margin-bottom:1.2rem;line-height:1.5;}
.room-actions{margin-top:auto;display:flex;flex-direction:column;gap:0.5rem;}

/* AMENITIES */
.amenities-bento{display:grid;gap:2px;grid-template-columns:1fr 1fr;}
@media(min-width:640px){.amenities-bento{grid-template-columns:repeat(3,1fr);}}
.amenity-card{background:var(--white);padding:1.8rem 1.5rem;transition:background 0.35s,transform 0.25s;}
.amenity-card:hover{background:var(--ocean);transform:translateY(-2px);}
.amenity-card:hover .amenity-title,.amenity-card:hover .amenity-desc{color:var(--sand) !important;}
.amenity-icon{font-size:1.9rem;margin-bottom:0.9rem;display:block;}
.amenity-title{font-family:var(--serif);font-size:1.1rem;color:var(--ocean);margin-bottom:0.4rem;transition:color 0.35s;}
.amenity-desc{font-size:0.8rem;color:var(--muted);line-height:1.7;transition:color 0.35s;}
.amenity-card.wide{grid-column:span 2;}
@media(min-width:640px){.amenity-card.tall{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;}}
.amenity-card.featured-card{background:linear-gradient(145deg,var(--deep),var(--teal));}
.amenity-card.featured-card .amenity-title,.amenity-card.featured-card .amenity-desc{color:var(--sand) !important;}
.amenity-card.featured-card .amenity-desc{opacity:0.75;}
.amenity-card.featured-card:hover{background:linear-gradient(145deg,#0a1620,#1e6b69);}

/* GUIDEBOOK */
.guide-section{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r2);padding:1.6rem;transition:border-color 0.3s,background 0.3s;}
.guide-section:hover{border-color:rgba(200,169,106,0.2);background:rgba(255,255,255,0.07);}
.guide-section-title{font-family:var(--serif);font-size:1.1rem;color:var(--gold);margin-bottom:1rem;display:flex;align-items:center;gap:0.6rem;}
.guide-list{list-style:none;display:flex;flex-direction:column;gap:0.6rem;}
.guide-list li{display:flex;gap:0.7rem;align-items:flex-start;font-size:0.82rem;color:rgba(245,239,227,0.7);line-height:1.65;}
.guide-list li::before{content:"—";color:var(--gold);flex-shrink:0;opacity:0.5;}
.guide-list strong{color:var(--sand);}
.guide-table{width:100%;border-collapse:collapse;margin-top:0.5rem;}
.guide-table tr{border-bottom:1px solid rgba(255,255,255,0.06);}
.guide-table tr:last-child{border-bottom:none;}
.guide-table td{padding:0.6rem 0;font-size:0.8rem;color:rgba(245,239,227,0.7);vertical-align:top;line-height:1.5;}
.guide-table td:first-child{color:rgba(245,239,227,0.4);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;width:42%;padding-right:1rem;font-weight:500;}
.guide-table td:last-child{color:var(--sand);}

/* CONTACT */
.contact-card{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:var(--r2);padding:1.1rem 1.4rem;display:flex;align-items:center;gap:1rem;transition:all 0.3s;}
.contact-card:hover{background:rgba(200,169,106,0.08);border-color:rgba(200,169,106,0.25);transform:translateX(4px);}
.contact-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.contact-info{flex:1;}
.contact-name{font-size:0.65rem;letter-spacing:0.14em;text-transform:uppercase;color:rgba(245,239,227,0.4);margin-bottom:0.15rem;}
.contact-value{font-size:0.88rem;color:var(--sand);}
.contact-tag{font-size:0.6rem;background:var(--gold);color:var(--ink);padding:0.2rem 0.6rem;border-radius:20px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}

/* NEARBY */
.nearby-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem;margin-top:0.8rem;}
@media(min-width:480px){.nearby-grid{grid-template-columns:repeat(3,1fr);}}
.nearby-item{background:rgba(255,255,255,0.04);border-radius:var(--r2);padding:0.75rem 1rem;font-size:0.78rem;color:rgba(245,239,227,0.65);border:1px solid rgba(255,255,255,0.05);transition:all 0.25s;}
.nearby-item:hover{background:rgba(255,255,255,0.07);border-color:rgba(200,169,106,0.15);}
.nearby-item strong{color:var(--sand);display:block;font-size:0.82rem;margin-bottom:0.2rem;}
.nearby-dist{color:var(--gold);font-size:0.68rem;margin-top:0.25rem;opacity:0.9;}
.nearby-warn{color:#e8a0a0;font-size:0.64rem;margin-top:0.15rem;}

/* FOOTER */
footer.site-footer{background:var(--ink);color:var(--sand);padding:clamp(3rem,7vw,5rem) clamp(1.2rem,5vw,4.5rem);position:relative;overflow:hidden;}
footer.site-footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(200,169,106,0.4),transparent);}
.footer-grid{display:grid;gap:3rem;margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,0.06);grid-template-columns:1fr 1fr;}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}}
.footer-logo{font-family:var(--serif);font-size:1.6rem;font-weight:400;letter-spacing:0.08em;color:var(--sand);display:block;margin-bottom:0.9rem;}
.footer-logo-dot{color:var(--gold);}
.footer-desc{font-size:0.8rem;color:rgba(245,239,227,0.38);line-height:1.85;max-width:260px;}
.footer-col h4{font-size:0.6rem;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;opacity:0.8;}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.6rem;}
.footer-col ul a{font-size:0.8rem;color:rgba(245,239,227,0.42);transition:color 0.2s;}
.footer-col ul a:hover{color:var(--gold);}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;font-size:0.71rem;color:rgba(245,239,227,0.25);}
.footer-socials{display:flex;gap:0.5rem;}
.social-dot{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:0.72rem;transition:all 0.2s;color:rgba(245,239,227,0.4);}
.social-dot:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);}

/* STICKY BAR */
.sticky-bar{position:fixed;bottom:0;left:0;right:0;z-index:190;background:rgba(11,25,34,0.97);backdrop-filter:blur(16px);padding:0.8rem clamp(1rem,4vw,3.5rem);display:flex;align-items:center;justify-content:space-between;gap:1rem;border-top:1px solid rgba(200,169,106,0.2);transform:translateY(100%);transition:transform 0.45s cubic-bezier(0.16,1,0.3,1);}
.sticky-bar.show{transform:translateY(0);}
.sticky-text{font-family:var(--serif);font-size:0.95rem;color:var(--sand);font-weight:400;white-space:nowrap;}
.sticky-text span{color:var(--gold);}
.sticky-btns{display:flex;gap:0.45rem;flex-wrap:wrap;}

/* SCROLL TOP */
.scroll-top{position:fixed;bottom:calc(1rem + 64px);right:1rem;z-index:191;width:40px;height:40px;border-radius:50%;background:rgba(26,51,70,0.85);border:1px solid rgba(200,169,106,0.3);color:var(--gold);font-size:1rem;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all 0.3s;cursor:pointer;}
.scroll-top.show{opacity:1;pointer-events:auto;}
.scroll-top:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px);}

/* REVEAL */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.65s cubic-bezier(0.16,1,0.3,1),transform 0.65s cubic-bezier(0.16,1,0.3,1);}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1),transform 0.6s cubic-bezier(0.16,1,0.3,1);}
.reveal-left.visible{opacity:1;transform:translateX(0);}