:root{--ivory:#fffaf5;--blush:#f4d9d6;--rose:#a95752;--rose2:#cf8b7e;--gold:#c8a56d;--ink:#382d2a;--glass:rgba(255,250,245,.84);--shadow:0 24px 70px rgba(72,44,35,.22)}
*{box-sizing:border-box}html,body{margin:0;background:#160f0d;color:var(--ink);font-family:"Be Vietnam Pro",sans-serif;overflow:hidden}button,input,textarea{font:inherit}.hidden{opacity:0!important;pointer-events:none!important;transform:translateY(10px)}
.app-shell{position:relative;width:100vw;height:100svh;max-width:520px;margin:auto;background:#0d0908;overflow:hidden;box-shadow:0 0 70px #000}
.story-screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}.story-screen.active{opacity:1;visibility:visible;z-index:2}.story-video{width:100%;height:100%;object-fit:cover;background:#1b1210}.screen-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.01) 48%,rgba(20,9,6,.52))}.screen-shade.soft{background:linear-gradient(180deg,transparent 58%,rgba(25,14,11,.34))}.screen-shade.final{background:linear-gradient(180deg,rgba(28,12,8,.08),transparent 48%,rgba(25,12,8,.25))}
.story-ui{position:absolute;z-index:5;left:18px;right:18px;transition:.45s ease}.bottom-ui{bottom:max(28px,env(safe-area-inset-bottom))}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;font-weight:700;color:#fff;text-shadow:0 2px 12px #000}.centered-label{text-align:center;margin:0 auto 12px;background:rgba(38,21,17,.42);border:1px solid rgba(255,255,255,.42);padding:10px 16px;border-radius:999px;backdrop-filter:blur(9px);width:max-content;max-width:100%;text-transform:none;letter-spacing:.04em}.centered-label strong{font-weight:800}
.cta{width:100%;border:0;border-radius:999px;padding:15px 20px;font-weight:700;cursor:pointer}.cta-primary{color:#fff;background:linear-gradient(135deg,#9d514d,#d59883);box-shadow:0 14px 36px rgba(121,55,50,.35),inset 0 1px rgba(255,255,255,.45)}.pulse{animation:pulse 1.8s infinite}@keyframes pulse{50%{transform:scale(1.025);box-shadow:0 0 0 10px rgba(255,220,210,.12)}}
.guest-name-overlay{position:absolute;z-index:4;top:49%;left:50%;width:78%;text-align:center;transform:translate(var(--guest-x,-50%),var(--guest-y,-50%)) scale(.3);filter:blur(14px);opacity:0;color:#7e503f;transition:1.2s cubic-bezier(.2,.8,.2,1)}.guest-name-overlay.show{transform:translate(var(--guest-x,-50%),var(--guest-y,-50%)) scale(1);filter:blur(0);opacity:1}.guest-name-overlay span{display:block;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}.guest-name-overlay strong{display:block;font-family:"Great Vibes",cursive;font-size:clamp(2rem,9vw,3.3rem);font-weight:400}
.form-screen{overflow:auto;background:#f5e8df}.form-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 10%,#fff8f2,transparent 40%),linear-gradient(160deg,#ecd0ca,#fff7ef 52%,#d8b693)}.glass-card{background:var(--glass);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.72);box-shadow:var(--shadow)}.form-card{position:relative;margin:12px;padding:20px 18px 22px;border-radius:28px;min-height:calc(100svh - 24px);display:flex;flex-direction:column;justify-content:center}.ornament{font-family:"Great Vibes",cursive;font-size:1.7rem;color:var(--gold);text-align:center}.form-card h1{text-align:center;margin:2px 0 5px;font-size:1.55rem}.form-intro{text-align:center;font-size:.82rem;opacity:.72;margin:0 auto 14px;max-width:360px}.compact-grid{display:grid;gap:12px}label>span,legend{display:block;font-weight:700;font-size:.8rem;margin-bottom:6px}input[type=tel],input[type=number]{width:100%;border:1px solid rgba(120,83,69,.15);border-radius:14px;padding:12px 14px;background:rgba(255,255,255,.84);outline:none}fieldset{border:0;padding:0;margin:0}.attendance-options{display:grid;grid-template-columns:1fr;gap:7px}.option-card{position:relative}.option-card input{position:absolute;opacity:0}.option-card span{display:block;margin:0;border:1px solid rgba(139,91,75,.16);background:rgba(255,255,255,.65);border-radius:14px;padding:11px 12px;text-align:center;font-size:.8rem;cursor:pointer;transition:.25s}.option-card input:checked+span{color:#fff;background:linear-gradient(135deg,#9d514d,#d59883);border-color:transparent;box-shadow:0 8px 20px rgba(125,65,59,.2)}small{display:block;margin-top:5px;font-size:.7rem;opacity:.62}.conditional-field{transition:.25s}.reaction-stage{margin:12px 0 10px;min-height:92px;border:1px dashed rgba(167,110,93,.22);border-radius:18px;background:rgba(255,255,255,.42);display:grid;grid-template-columns:84px 1fr;align-items:center;gap:10px;padding:9px 11px}.reaction-stage img{width:84px;height:74px;object-fit:cover;border-radius:13px;background:rgba(255,255,255,.55)}.reaction-stage p{font-size:.76rem;line-height:1.45;margin:0;opacity:.74}.submit-cta{margin-top:2px}.form-status{text-align:center;min-height:18px;font-size:.74rem;margin:7px 0 0}
.event-info-card{position:absolute;z-index:6;top:max(72px,calc(env(safe-area-inset-top) + 26px));left:12px;width:62%;padding:10px 12px;border-radius:17px;background:linear-gradient(135deg,rgba(255,252,247,.93),rgba(251,231,224,.88));border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 34px rgba(53,27,21,.18);backdrop-filter:blur(14px);color:#5a3d35}.event-info-card h2{font-family:"Great Vibes",cursive;font-weight:400;font-size:clamp(1.22rem,5.2vw,1.72rem);line-height:1.05;margin:0 0 5px;text-align:left;color:#8d4f47}.event-info-card p{margin:3px 0;font-size:.64rem;line-height:1.38;text-align:left}.event-info-card strong{color:#70433d}
.hotspot-layer{position:absolute;inset:0;z-index:7;pointer-events:none}.hotspot{position:absolute;pointer-events:auto;border:2px solid rgba(255,255,255,.93);border-radius:999px;color:#fff;background:linear-gradient(135deg,rgba(135,61,55,.95),rgba(194,112,97,.96));box-shadow:0 7px 0 rgba(76,33,29,.35),0 12px 26px rgba(61,30,25,.3),0 0 0 6px rgba(255,240,230,.14);font-weight:800;padding:12px 19px;font-size:.92rem;white-space:nowrap;cursor:pointer;transition:.18s;animation:hotGlow 2.1s ease-in-out infinite}.hotspot:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(76,33,29,.35),0 8px 16px rgba(61,30,25,.28)}@keyframes hotGlow{50%{filter:brightness(1.13);box-shadow:0 7px 0 rgba(76,33,29,.35),0 14px 34px rgba(61,30,25,.35),0 0 0 9px rgba(255,240,230,.18)}}.hotspot-flower{left:8%;top:49%}.hotspot-wish{right:5%;top:54%}.hotspot-gift{right:6%;bottom:15%}
.restart-btn{position:absolute;z-index:8;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);border:1px solid rgba(255,255,255,.65);background:rgba(36,20,16,.68);color:#fff;border-radius:999px;padding:10px 17px;font-size:.76rem;backdrop-filter:blur(10px)}
.wish-board{position:absolute;z-index:6;top:16%;right:2%;width:30%;height:28%;pointer-events:none}.wish-note{position:absolute;width:72px;max-height:76px;overflow:hidden;border:1px solid #a9916d;background:#fff8c9;color:#4a3c31;padding:6px;border-radius:5px;box-shadow:0 7px 16px rgba(0,0,0,.2);font-size:.62rem;transform:rotate(var(--r));pointer-events:auto;cursor:pointer}
#celebration-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}
.audio-dock{position:fixed;z-index:80;right:max(12px,calc((100vw - 520px)/2 + 12px));bottom:max(226px,calc(env(safe-area-inset-bottom) + 212px));display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:none}.audio-panel-toggle{pointer-events:auto;border:1px solid rgba(255,255,255,.52);background:rgba(61,35,29,.78);color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.05rem;backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.24);transition:.22s}.audio-panel-toggle:active{transform:scale(.94)}.audio-panel{pointer-events:auto;width:0;opacity:0;overflow:hidden;display:flex;align-items:center;padding:0;background:rgba(61,35,29,.78);border:1px solid rgba(255,255,255,.34);border-radius:999px;backdrop-filter:blur(12px);box-shadow:0 10px 28px rgba(0,0,0,.22);transition:width .24s ease,opacity .2s ease,padding .24s ease}.audio-dock.expanded .audio-panel{width:116px;opacity:1;padding:11px 14px}.volume-slider{width:88px;accent-color:#e3a38e;cursor:pointer}.audio-dock.compact .audio-panel{width:0;opacity:0;padding:0;border-width:0}
.soft-transition{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(255,247,240,.0);opacity:0;visibility:hidden;transition:.5s}.soft-transition.show{opacity:1;visibility:visible;background:rgba(255,247,240,.82);backdrop-filter:blur(14px)}.soft-transition-card{text-align:center;color:#87534a}.transition-flower{display:block;font-size:2.4rem;animation:floaty 1.2s infinite ease-in-out}.soft-transition-card p{font-family:"Great Vibes",cursive;font-size:1.8rem;margin:8px 0}@keyframes floaty{50%{transform:translateY(-8px) rotate(20deg)}}
.interaction-hint{position:fixed;z-index:70;left:50%;bottom:88px;transform:translateX(-50%);width:min(88vw,410px);padding:13px 42px 13px 16px;border-radius:18px;background:rgba(255,250,245,.94);border:1px solid rgba(255,255,255,.8);box-shadow:0 14px 40px rgba(39,20,16,.24);text-align:center;color:#74463f;backdrop-filter:blur(14px)}.interaction-hint strong{display:block;font-size:.82rem}.interaction-hint span{display:block;font-size:.7rem;margin-top:3px;opacity:.72}.hint-close{position:absolute;right:8px;top:8px;border:0;background:rgba(100,60,52,.08);width:28px;height:28px;border-radius:50%;cursor:pointer}
.modal-backdrop{position:fixed;inset:0;z-index:90;background:rgba(24,13,10,.48);display:grid;place-items:center;padding:18px}.modal-backdrop[hidden]{display:none!important;visibility:hidden!important;pointer-events:none!important}.modal{position:relative;width:min(100%,430px);max-height:84svh;overflow:auto;border-radius:26px;padding:24px}.modal-close{position:absolute;top:9px;right:10px;border:0;background:rgba(80,49,41,.1);width:34px;height:34px;border-radius:50%;font-size:1.3rem}.modal h3{text-align:center;margin:0 0 10px}.qr-wrap{display:grid;place-items:center}.qr-wrap img{width:min(72vw,280px);border-radius:20px;background:#fff;padding:13px;box-shadow:0 15px 40px rgba(70,45,38,.2)}.modal textarea{width:100%;min-height:120px;border:1px solid rgba(100,70,60,.18);border-radius:16px;padding:13px;resize:vertical}.modal-actions{display:flex;gap:10px;margin-top:12px}.modal-actions button{flex:1}.tiny{font-size:.74rem;opacity:.68;text-align:center}
.audio-dock {
  bottom: 180px !important;
}
@media (max-height:740px){.event-info-card{padding:8px 10px}.event-info-card h2{font-size:1.2rem}.event-info-card p{font-size:.58rem}.hotspot{font-size:.78rem;padding:10px 14px}.hotspot-flower{top:50%}.hotspot-wish{top:56%}.form-card{justify-content:flex-start}.reaction-stage{min-height:76px}.reaction-stage img{height:60px}}
@media (min-width:521px){body{display:grid;place-items:center}.app-shell{height:min(100svh,900px);border-radius:30px}}

/* ===== V4: countdown + dual audio control ===== */
.countdown-card{position:absolute;z-index:6;top:max(84px,calc(env(safe-area-inset-top) + 38px));right:12px;width:37%;padding:9px 8px 8px;border-radius:17px;background:linear-gradient(145deg,rgba(255,252,247,.34),rgba(251,231,224,.18));border:1px solid rgba(255,255,255,.58);box-shadow:0 12px 32px rgba(53,27,21,.14),inset 0 1px rgba(255,255,255,.5);backdrop-filter:blur(10px);color:#6f463f}.countdown-title{text-align:center;font-family:"Great Vibes",cursive;font-size:1.05rem;line-height:1;margin-bottom:7px;color:#91574f;text-shadow:0 1px rgba(255,255,255,.7)}.flip-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.flip-unit{min-width:0;text-align:center}.flip-unit span{position:relative;display:grid;place-items:center;min-height:32px;padding:4px 1px;border-radius:7px;background:linear-gradient(180deg,rgba(94,59,52,.83) 0 49%,rgba(68,42,37,.88) 50% 100%);border:1px solid rgba(255,255,255,.32);box-shadow:0 5px 12px rgba(65,37,31,.2),inset 0 1px rgba(255,255,255,.22);color:#fff8ef;font-size:.65rem;font-weight:800;letter-spacing:.02em;transform-origin:center}.flip-unit span::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1px;background:rgba(20,10,8,.3)}.flip-unit small{display:block;margin-top:3px;font-size:.42rem;text-transform:uppercase;letter-spacing:.05em;color:#754c45}.flip-change{animation:flipTick .42s ease}@keyframes flipTick{0%{transform:perspective(100px) rotateX(-72deg);filter:brightness(1.3)}100%{transform:perspective(100px) rotateX(0);filter:brightness(1)}}

.audio-panel{flex-direction:column;align-items:stretch;gap:8px}.audio-dock.expanded .audio-panel{width:176px;padding:10px 12px}.audio-row{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:8px;margin:0;color:#fff;font-size:.63rem;font-weight:700}.audio-row>span{margin:0}.audio-row[hidden]{display:none!important}.audio-row .volume-slider{width:100%;min-width:92px}.audio-panel-toggle{width:48px;height:48px}

@media (max-height:740px){.countdown-card{padding:7px 6px}.countdown-title{font-size:.9rem;margin-bottom:5px}.flip-unit span{min-height:28px;font-size:.58rem}.flip-unit small{font-size:.38rem}.audio-dock.expanded .audio-panel{width:164px}}


/* ===== V5: audio unlock gate ===== */
.start-gate{position:absolute;inset:0;z-index:120;display:grid;place-items:center;align-content:center;gap:10px;padding:24px;background:linear-gradient(180deg,rgba(35,19,15,.18),rgba(35,19,15,.46));backdrop-filter:blur(3px);transition:opacity .4s ease,visibility .4s ease}.start-gate.hidden{opacity:0;visibility:hidden;pointer-events:none}.start-experience{display:flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.82);border-radius:999px;padding:13px 18px;background:linear-gradient(135deg,rgba(137,74,64,.96),rgba(201,136,117,.96));color:#fff;font:700 .86rem/1.2 "Be Vietnam Pro",sans-serif;box-shadow:0 12px 36px rgba(46,22,18,.3),0 0 0 7px rgba(255,242,232,.15);cursor:pointer;animation:startPulse 1.9s ease-in-out infinite}.start-icon{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.18);font-size:1rem}.start-gate small{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.45);font-size:.66rem}.start-experience:active{transform:scale(.97)}@keyframes startPulse{50%{filter:brightness(1.1);box-shadow:0 16px 42px rgba(46,22,18,.36),0 0 0 11px rgba(255,242,232,.1)}}

/* ===== V5.3: one fixed 9:16 mobile canvas on every device ===== */
html,body{
  width:100%;
  height:100%;
  min-height:100%;
}
body{
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#160f0d;
}
.app-shell{
  position:relative;
  width:min(100vw,calc(100svh * 9 / 16));
  height:min(100svh,calc(100vw * 16 / 9));
  max-width:none;
  max-height:none;
  aspect-ratio:9 / 16;
  margin:0;
  overflow:hidden;
  background:#0d0908;
  box-shadow:0 0 70px rgba(0,0,0,.72);
  isolation:isolate;
}
.form-card{
  min-height:calc(100% - 24px);
}
.audio-dock{
  position:absolute;
  right:12px;
  bottom:max(66px,calc(env(safe-area-inset-bottom) + 52px));
}
.soft-transition,
.modal-backdrop,
.interaction-hint{
  position:absolute;
}
@media (min-width:700px){
  .app-shell{border-radius:28px}
}
@media (max-width:699px){
  .app-shell{border-radius:0}
}

/* Khóa kích thước thiết kế gốc: 430 × 764, chỉ co nhỏ khi màn hình không đủ chỗ. */
.app-shell{
  width:min(430px,100vw,calc(100svh * 9 / 16));
  height:auto;
  max-height:100svh;
}


/* V5.4: hotspot tròn, có thể ẩn giao diện nhưng vẫn click được */
.hotspot{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  aspect-ratio:1/1;
  white-space:normal;
  text-align:center;
  line-height:1.1;
}
.hotspot.is-transparent{
  opacity:0;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
  animation:none!important;
  color:transparent!important;
  filter:none!important;
}
.hotspot.is-transparent span{visibility:hidden}
.hotspot.is-transparent:focus-visible{
  opacity:.18;
  outline:2px dashed rgba(255,255,255,.65);
  outline-offset:2px;
}
.hotspot.is-disabled{display:none!important}
/* =====================================================
   FIX IPHONE KEYBOARD:
   - Khóa khung 9:16 theo CHIỀU RỘNG, không theo chiều cao
   - Bàn phím mở không làm toàn bộ web bị thu nhỏ
   - Ngăn Safari tự zoom khi focus vào input
===================================================== */

html,
body {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: hidden !important;
  -webkit-text-size-adjust: 100% !important;
}

body {
  display: grid !important;
  place-items: center !important;
  background: #160f0d !important;
}

/*
  Quan trọng:
  Không dùng 100svh / 100dvh để tính kích thước khung nữa.
  Khung chỉ phụ thuộc vào chiều rộng màn hình.
*/
.app-shell {
  width: min(430px, 100vw) !important;
  height: calc(min(430px, 100vw) * 16 / 9) !important;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 430px !important;
  max-height: 764px !important;

  aspect-ratio: 9 / 16 !important;
  flex: none !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  position: relative !important;

  transform: none !important;
}

/* Form được cuộn bên trong khung, không làm co toàn bộ web */
.form-screen {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;

  /* Khi bàn phím mở, Safari sẽ cuộn ô nhập lên vùng dễ nhìn */
  scroll-padding-top: 90px !important;
  scroll-padding-bottom: 320px !important;
}

.form-card {
  width: auto !important;
  height: auto !important;
  min-height: calc(100% - 24px) !important;
  max-height: none !important;
  margin: 12px !important;
}

/*
  iPhone tự zoom nếu input nhỏ hơn 16px.
  Dùng 16px để không bị phóng/thu giao diện.
*/
input,
textarea,
select,
input[type="tel"],
input[type="number"] {
  font-size: 16px !important;
  line-height: 1.35 !important;
  transform: none !important;
  zoom: 1 !important;
}

/* Giữ kích thước input ổn định khi đang nhập */
input[type="tel"],
input[type="number"] {
  min-height: 48px !important;
}

/* Giúp phần cuối form không bị bàn phím che */
.form-status {
  scroll-margin-bottom: 300px !important;
}

.submit-cta {
  scroll-margin-bottom: 300px !important;
}

/* Trên desktop vẫn chỉ hiển thị đúng một khung điện thoại */
@media (min-width: 431px) {
  .app-shell {
    width: 430px !important;
    height: 764px !important;
    border-radius: 28px !important;
  }
}

/* Điện thoại nhỏ: giữ nguyên tỷ lệ theo chiều rộng */
@media (max-width: 430px) {
  .app-shell {
    width: 100vw !important;
    height: calc(100vw * 16 / 9) !important;
    border-radius: 0 !important;
  }
}