:root{--red:#67131d;--deep:#160507;--pink:#f3a1b6;--cream:#f7e9df;--line:rgba(255,255,255,.2)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--deep);color:var(--cream);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}.header{position:fixed;inset:0 0 auto;z-index:30;height:76px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid transparent;transition:.3s}.header.scrolled{background:rgba(16,3,5,.9);backdrop-filter:blur(14px);border-color:var(--line)}.logo{font:600 34px 'Playfair Display';border:1px solid currentColor;border-radius:50%;width:45px;height:45px;display:grid;place-items:center}.header nav{display:flex;gap:28px;font-size:13px;text-transform:uppercase;letter-spacing:.12em}.header-actions{display:flex;gap:10px;align-items:center}.book-mini,#langBtn{border:1px solid var(--line);background:transparent;color:white;padding:10px 14px;text-transform:uppercase;font-size:12px}.hero{min-height:100vh;position:relative;display:flex;align-items:flex-end;padding:120px 7vw 8vh;overflow:hidden}.hero-bg,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.hero-shade{background:linear-gradient(90deg,rgba(20,2,5,.9),rgba(20,2,5,.25) 58%,rgba(20,2,5,.25)),linear-gradient(0deg,rgba(20,2,5,.8),transparent 40%)}.hero-copy{position:relative;max-width:700px}.address,.est{text-transform:uppercase;letter-spacing:.18em;font-size:12px}.est{color:var(--pink)}h1{font:600 clamp(80px,15vw,220px)/.72 'Playfair Display';margin:20px 0 0;letter-spacing:-.08em}.script{font:italic 600 38px 'Playfair Display';color:var(--pink);margin:10px 0 25px}.hero h2{font-size:clamp(25px,3vw,44px);max-width:600px}.hero-copy>p:last-of-type{line-height:1.7;max-width:610px}.hero-buttons{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}.primary,.ghost{display:inline-flex;padding:15px 22px;border:1px solid var(--pink);text-transform:uppercase;letter-spacing:.08em;font-size:12px}.primary{background:var(--pink);color:#29070d}.ghost{background:rgba(0,0,0,.15)}.hero-hours{position:absolute;right:4vw;bottom:5vh;font-size:12px;letter-spacing:.12em}.hero-hours span{display:block;color:var(--pink);margin-top:7px}.marquee{overflow:hidden;background:var(--pink);color:#3b0810;padding:12px 0;white-space:nowrap;font-weight:600;letter-spacing:.1em}.marquee div{width:max-content;animation:move 22s linear infinite}@keyframes move{to{transform:translateX(-50%)}}.section{padding:110px 7vw}.section-head{max-width:760px;margin-bottom:55px}.section-head p,.section-head span{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--pink)}.section-head h2{font:600 clamp(42px,7vw,90px)/.95 'Playfair Display';margin:12px 0 22px}.booking{background:var(--cream);color:#321014}.booking .section-head p,.booking .section-head span{color:#8a2839}form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;max-width:1000px}label{font-size:12px;text-transform:uppercase;letter-spacing:.1em}input,select,textarea{width:100%;margin-top:8px;padding:16px;border:1px solid rgba(50,16,20,.25);background:transparent;font:inherit;color:inherit}textarea{min-height:110px}.full,.submit,.status{grid-column:1/-1}.submit{padding:18px;border:0;background:#54111c;color:white;text-transform:uppercase;letter-spacing:.1em}.status{min-height:20px}.weekly{background:#5e1019}.rituals{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.rituals article{padding:35px;border-right:1px solid var(--line)}.rituals article:last-child{border:0}.rituals b{font:600 50px 'Playfair Display';color:var(--pink)}.rituals small{display:block;margin:16px 0;color:var(--pink);letter-spacing:.18em}.rituals h3{font:600 34px 'Playfair Display';margin:0 0 16px}.rituals p{line-height:1.7;color:#e9cfd4}.gallery{display:grid;grid-template-columns:1.3fr .8fr .8fr;grid-auto-rows:280px;gap:12px}.gallery img{width:100%;height:100%;object-fit:cover}.gallery img:first-child{grid-row:span 2}.gallery img:last-child{grid-column:span 2}footer{padding:80px 7vw 35px;background:#090203;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:35px;border-top:1px solid var(--line)}.footer-brand{font:600 clamp(60px,9vw,130px)/.8 'Playfair Display';letter-spacing:-.07em}footer span{color:var(--pink);text-transform:uppercase;letter-spacing:.15em;font-size:11px}footer p{line-height:1.7}footer small{grid-column:1/-1;padding-top:30px;border-top:1px solid var(--line);color:#b9949d}@media(max-width:800px){.header nav{display:none}.hero{padding:120px 22px 80px}.hero-hours{display:none}.section{padding:80px 22px}form{grid-template-columns:1fr}.rituals{grid-template-columns:1fr}.rituals article{border-right:0;border-bottom:1px solid var(--line)}.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:220px}.gallery img:first-child{grid-row:span 1;grid-column:span 2}.gallery img:last-child{grid-column:span 2}footer{grid-template-columns:1fr}.footer-brand,footer small{grid-column:1}}

/* Hero update — ảnh người dùng cung cấp, bố cục chữ trái / hình phải */
.hero-bg{
  object-position:68% center;
  filter:saturate(.92) contrast(1.04) brightness(.82);
}
.hero-shade{
  background:
    linear-gradient(90deg,rgba(8,2,3,.97) 0%,rgba(8,2,3,.88) 24%,rgba(8,2,3,.55) 46%,rgba(8,2,3,.10) 72%,rgba(8,2,3,.18) 100%),
    linear-gradient(0deg,rgba(8,2,3,.82) 0%,transparent 42%);
}
.hero-copy{
  max-width:590px;
  margin-bottom:4vh;
}
.hero h1{
  font-size:clamp(82px,12vw,178px);
}
.hero h2{
  max-width:520px;
}
@media(max-width:800px){
  .hero-bg{object-position:62% center;}
  .hero-shade{
    background:
      linear-gradient(90deg,rgba(8,2,3,.88),rgba(8,2,3,.26)),
      linear-gradient(0deg,rgba(8,2,3,.96) 0%,rgba(8,2,3,.38) 58%,rgba(8,2,3,.22) 100%);
  }
  .hero-copy{margin-bottom:0;max-width:520px;}
}


/* Hero desktop: ảnh nằm lệch hẳn sang phải như mẫu thứ 2 */
@media (min-width: 801px){
  .hero{
    background:
      radial-gradient(circle at 68% 42%, rgba(91,16,25,.34), transparent 36%),
      linear-gradient(90deg,#050102 0%,#0b0204 42%,#120407 100%);
  }
  .hero-bg{
    inset:0 0 0 auto;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:right center;
    transform:none;
    filter:saturate(.95) contrast(1.05) brightness(.88);
  }
  .hero-shade{
    background:
      linear-gradient(90deg,
        rgba(4,1,2,.99) 0%,
        rgba(4,1,2,.96) 23%,
        rgba(4,1,2,.74) 39%,
        rgba(4,1,2,.28) 57%,
        rgba(4,1,2,.03) 77%,
        rgba(4,1,2,.08) 100%),
      linear-gradient(0deg,rgba(4,1,2,.72) 0%,transparent 40%);
  }
  .hero-copy{
    max-width:560px;
    margin-bottom:3vh;
  }
}

/* Hero final: thu nhỏ ảnh gốc và đẩy toàn bộ nhân vật sang hẳn bên phải */
@media (min-width: 801px){
  .hero{
    background:
      radial-gradient(circle at 73% 43%, rgba(91,16,25,.30), transparent 34%),
      linear-gradient(90deg,#030102 0%,#070203 44%,#120407 100%);
  }

  .hero-bg{
    top:50%;
    right:-8vw;
    bottom:auto;
    left:auto;
    width:82vw;
    height:auto;
    max-width:none;
    object-fit:contain;
    object-position:center;
    transform:translateY(-50%) scale(.91);
    transform-origin:right center;
    filter:saturate(.95) contrast(1.05) brightness(.90);
  }

  .hero-shade{
    background:
      linear-gradient(90deg,
        rgba(3,1,2,1) 0%,
        rgba(3,1,2,.98) 28%,
        rgba(3,1,2,.86) 40%,
        rgba(3,1,2,.42) 53%,
        rgba(3,1,2,.08) 68%,
        rgba(3,1,2,.03) 100%),
      linear-gradient(0deg,rgba(3,1,2,.72) 0%,transparent 38%);
  }

  .hero-copy{
    max-width:555px;
    margin-bottom:3vh;
  }
}

/* Booking layout: nội dung trái, form gọn bên phải */
.booking{
  padding-top:96px;
  padding-bottom:96px;
}
.booking-layout{
  width:min(1380px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(460px,560px);
  gap:clamp(48px,7vw,110px);
  align-items:start;
}
.booking-intro{
  position:sticky;
  top:118px;
  padding-top:10px;
}
.booking .section-head{
  max-width:650px;
  margin-bottom:42px;
}
.booking .section-head h2{
  font-size:clamp(54px,6.6vw,102px);
  max-width:680px;
}
.booking-notes{
  display:grid;
  gap:0;
  max-width:620px;
  border-top:1px solid rgba(50,16,20,.18);
}
.booking-notes>div{
  display:grid;
  grid-template-columns:54px 150px 1fr;
  gap:18px;
  align-items:start;
  padding:20px 0;
  border-bottom:1px solid rgba(50,16,20,.18);
}
.booking-notes b{
  font:600 25px 'Playfair Display';
  color:#8a2839;
}
.booking-notes span{
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:11px;
  padding-top:7px;
}
.booking-notes p{
  margin:3px 0 0;
  line-height:1.55;
  color:rgba(50,16,20,.72);
  font-size:14px;
}
.booking-card{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding:34px;
  background:rgba(255,255,255,.36);
  border:1px solid rgba(50,16,20,.18);
  box-shadow:0 24px 70px rgba(62,15,24,.10);
}
.booking-card .form-title{
  grid-column:1/-1;
  padding-bottom:22px;
  margin-bottom:2px;
  border-bottom:1px solid rgba(50,16,20,.16);
}
.booking-card .form-title span{
  display:block;
  color:#8a2839;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:10px;
  margin-bottom:8px;
}
.booking-card .form-title h3{
  margin:0;
  font:600 34px/1.05 'Playfair Display';
}
.booking-card label{
  display:block;
}
.booking-card input,
.booking-card select,
.booking-card textarea{
  padding:14px 15px;
  background:rgba(255,255,255,.28);
}
.booking-card textarea{
  min-height:92px;
  resize:vertical;
}
.booking-card .submit{
  min-height:54px;
  cursor:pointer;
}
.booking-card .status{
  margin:0;
}

@media(max-width:1050px){
  .booking-layout{
    grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
    gap:42px;
  }
  .booking-notes>div{
    grid-template-columns:44px 1fr;
  }
  .booking-notes p{
    grid-column:2;
  }
}

@media(max-width:800px){
  .booking{
    padding-top:70px;
    padding-bottom:70px;
  }
  .booking-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .booking-intro{
    position:static;
    padding-top:0;
  }
  .booking .section-head{
    margin-bottom:28px;
  }
  .booking .section-head h2{
    font-size:clamp(46px,14vw,72px);
  }
  .booking-notes{
    display:none;
  }
  .booking-card{
    grid-template-columns:1fr;
    padding:24px 18px;
  }
  .booking-card .form-title,
  .booking-card .full,
  .booking-card .submit,
  .booking-card .status{
    grid-column:1;
  }
}


/* Date field, guest stepper and SEO journal */
.field-hint{display:block;margin-top:6px;font-size:10px;letter-spacing:.04em;text-transform:none;color:rgba(50,16,20,.58)}
.guest-stepper{display:grid;grid-template-columns:48px 1fr 48px;margin-top:8px;border:1px solid rgba(50,16,20,.25);background:rgba(255,255,255,.28)}
.guest-stepper input{margin:0;border:0;border-left:1px solid rgba(50,16,20,.18);border-right:1px solid rgba(50,16,20,.18);text-align:center;appearance:textfield;-moz-appearance:textfield}
.guest-stepper input::-webkit-inner-spin-button,.guest-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.guest-btn{border:0;background:transparent;color:#54111c;font:500 24px/1 'DM Sans';cursor:pointer;transition:.2s}
.guest-btn:hover{background:#54111c;color:#fff}
.journal{background:#120406}
.journal .section-head{max-width:850px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article-card{border:1px solid var(--line);background:rgba(255,255,255,.025);overflow:hidden;transition:transform .25s,border-color .25s}
.article-card:hover{transform:translateY(-6px);border-color:rgba(243,161,182,.65)}
.article-card>a{display:block;height:100%}
.article-card img{width:100%;height:240px;object-fit:cover;display:block;filter:saturate(.88) contrast(1.04)}
.article-card div{padding:25px}
.article-card span{color:var(--pink);font-size:10px;text-transform:uppercase;letter-spacing:.16em}
.article-card h3{font:600 28px/1.15 'Playfair Display';margin:12px 0 14px}
.article-card p{color:#d8bdc3;line-height:1.65;margin:0 0 22px}
.article-card b{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--pink)}
@media(max-width:950px){.article-grid{grid-template-columns:1fr 1fr}.article-card:last-child{grid-column:1/-1}.article-card:last-child>a{display:grid;grid-template-columns:1fr 1fr}.article-card:last-child img{height:100%}}
@media(max-width:650px){.article-grid{grid-template-columns:1fr}.article-card:last-child{grid-column:auto}.article-card:last-child>a{display:block}.article-card:last-child img,.article-card img{height:220px}}


/* Calendar button, pink F favicon support and improved journal crop */
.date-field{position:relative;display:block;margin-top:8px}
.date-field>input#bookingDate{margin-top:0;padding-right:54px}
.date-picker-button{position:absolute;right:1px;top:1px;bottom:1px;width:50px;border:0;border-left:1px solid rgba(50,16,20,.18);background:transparent;color:#54111c;display:grid;place-items:center;cursor:pointer}
.date-picker-button:hover{background:rgba(84,17,28,.06)}
.date-picker-button:focus-visible{outline:2px solid #8a2839;outline-offset:-3px}
.date-picker-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.native-date-picker{position:absolute;right:0;top:100%;width:1px;height:1px;opacity:0;pointer-events:none;padding:0;margin:0;border:0}
.article-card--dress img{object-position:center 28%}
@media(max-width:650px){.article-card--dress img{object-position:center 24%}}


/* Production polish */
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.header nav a,.book-mini,#langBtn,.primary,.ghost,.submit{transition:background-color .25s,color .25s,border-color .25s,transform .25s}
.header nav a:hover{color:var(--pink)}
.primary:hover,.submit:hover{transform:translateY(-2px);filter:brightness(1.05)}
.ghost:hover,.book-mini:hover,#langBtn:hover{border-color:var(--pink);color:var(--pink)}
.gallery img{transition:transform .45s,filter .45s;filter:saturate(.9)}
.gallery img:hover{transform:scale(1.018);filter:saturate(1.04)}
.booking-card input:focus,.booking-card select:focus,.booking-card textarea:focus{border-color:#8a2839;box-shadow:0 0 0 3px rgba(138,40,57,.10);outline:0}
.submit[disabled]{opacity:.6;cursor:wait;transform:none}
.status{font-size:13px;line-height:1.55;text-transform:none;letter-spacing:0}
.status.success{padding:14px 16px;background:#e9f5eb;border:1px solid #9dc6a3;color:#24542b}
.status.error{padding:14px 16px;background:#fff0f0;border:1px solid #d8a2a2;color:#7d2020}
.floating-book{position:fixed;right:22px;bottom:22px;z-index:25;display:none;padding:13px 18px;background:var(--pink);color:#2d0910;text-transform:uppercase;letter-spacing:.1em;font-size:11px;box-shadow:0 12px 35px rgba(0,0,0,.28)}
.floating-book.visible{display:inline-flex}
@media(max-width:800px){.floating-book.visible{display:inline-flex}.header-actions .book-mini{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}


/* Hotline contact — visible conversion points */
.hero-hotline{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:11px 15px;border-left:2px solid var(--pink);background:rgba(10,2,4,.48);backdrop-filter:blur(8px);color:#fff}
.hero-hotline span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.hero-hotline strong{font:500 18px/1 'DM Sans';letter-spacing:.04em;color:#fff}
.hero-hotline:hover strong{color:var(--pink)}
.booking-hotline{grid-column:1/-1;margin:2px 0 0;text-align:center;font-size:13px;color:rgba(66,24,31,.68)}
.booking-hotline a{color:#65101d;font-weight:600;text-decoration:underline;text-underline-offset:4px}
.footer-hotline p{margin:.45rem 0 .35rem}
.footer-hotline p a{font:600 22px/1.2 'DM Sans';color:var(--pink);white-space:nowrap}
.footer-hotline small{display:block;color:rgba(255,255,255,.55);font-size:10px;letter-spacing:.06em}
.floating-actions{position:fixed;right:22px;bottom:22px;z-index:25;display:flex;gap:8px;align-items:center}
.floating-actions .floating-book{position:static;right:auto;bottom:auto}
.floating-call{display:inline-flex;padding:13px 18px;border:1px solid rgba(243,161,182,.65);background:rgba(18,4,6,.92);color:var(--pink);text-transform:uppercase;letter-spacing:.1em;font-size:11px;box-shadow:0 12px 35px rgba(0,0,0,.28)}
.floating-call:hover{background:var(--pink);color:#2d0910}
@media(max-width:800px){.hero-hotline{margin-top:16px}.floating-actions{right:14px;bottom:14px}.floating-call,.floating-actions .floating-book{padding:12px 14px}}