/* Bản A — màn chờ khi khách quét mã QR trên chai.
   Mẫu khung vòm: ảnh kho chum sành (trước 17/09 là chum ngâm sâm) hiện dần trong khung vòm, hơi rượu bốc nhẹ, hạt vàng bay lên.
   Chỉ hiện ở /qr, mỗi phiên một lần, khoảng 2,2 giây, tối đa 3 giây, chạm để bỏ qua. */

.chao { display: none; }
html.cho-dang { overflow: hidden; }
.cho-dang .chao {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; overflow: hidden; cursor: pointer; text-align: center;
  background: radial-gradient(90% 55% at 50% 40%, rgba(216,180,107,.13), transparent 62%), var(--pattern), linear-gradient(180deg, #0B1F15 0%, #12301F 55%, #0E2519 100%);
  transition: opacity .45s ease .32s, visibility 0s linear .85s;
}
.chao.is-out { opacity: 0; visibility: hidden; }
.cho-dang:not(.cho-mo) .hero__text > *, .cho-dang:not(.cho-mo) .arch { animation-play-state: paused; } /* đầu trang chạy sau màn chờ */
.chao__in { position: relative; z-index: 2; display: grid; justify-items: center; }
.chao__foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); margin: 0; font: 500 11px/1.4 var(--text); letter-spacing: .22em; text-transform: uppercase; color: rgba(243,234,211,.5); opacity: 0; animation: k-len .8s .9s ease forwards; }
.chao.is-out .chao__foot { opacity: 0 !important; transition: opacity .3s ease; }

/* Chữ dùng chung */
.k__gold { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .32em .04em .16em; margin: -.32em -.04em -.16em; }
.k__name { position: relative; z-index: 3; margin: 0; font: 600 38px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--kem); text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.k__name span { display: inline-block; opacity: 0; transform: translateY(16px); animation: k-len .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--d0, .45s) + var(--k) * 45ms); }
.k__tag { margin: 10px 0 0; font: 500 16px/1.3 var(--display); letter-spacing: .3em; text-transform: uppercase; opacity: 0; animation: k-len .8s var(--d1, .95s) ease forwards; }
.chao.is-out .k__name, .chao.is-out .k__tag { opacity: 0 !important; transition: opacity .3s ease; }

@keyframes k-len { to { opacity: 1; transform: none; } }

/* Khung vòm dùng chung (giống đầu trang bản A) */
.k-wrap { position: relative; transition: transform .45s ease, filter .4s ease, opacity .38s ease .06s; }
.k-vom { position: relative; width: min(64vw, 240px); padding: 6px; border: 1px solid rgba(216,180,107,.85); border-radius: 999px 999px 10px 10px;
  box-shadow: 0 0 0 4px #0E2519, 0 0 0 5px rgba(216,180,107,.28), 0 30px 60px -24px rgba(0,0,0,.8), 0 0 60px -20px rgba(216,180,107,.35);
  opacity: 0; transform: translateY(26px); animation: k-len .9s .1s cubic-bezier(.2,.7,.2,1) forwards;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, rgba(0,0,0,.4) 86%, transparent); mask-image: linear-gradient(180deg, #000 60%, rgba(0,0,0,.4) 86%, transparent); }
.k-vom::after { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg); border: 1px solid var(--vang); background: #0E2519; }
.k-khung { position: relative; overflow: hidden; aspect-ratio: 620 / 700; border-radius: 999px 999px 6px 6px; background: #0a1a12; }
.k-khung img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.chao.is-out .k-wrap { transform: scale(1.1); filter: brightness(1.45); opacity: 0; }

/* Hơi rượu bốc lên, hạt vàng bay lên (dùng chung) */
.k-hoi { position: absolute; z-index: 2; left: 50%; top: 14%; width: 120px; height: 120px; margin-left: -60px; overflow: visible; pointer-events: none; }
.k-hoi path { fill: none; stroke: rgba(255,240,210,.72); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 60 120; stroke-dashoffset: 60; opacity: 0; filter: blur(1.5px); animation: k-hoi-bay 2.2s ease-out infinite; }
.k-hoi path:nth-child(2) { animation-delay: .7s; }
.k-hoi path:nth-child(3) { animation-delay: 1.3s; }
@keyframes k-hoi-bay { 0% { opacity: 0; stroke-dashoffset: 60; transform: translateY(18px); } 30% { opacity: .9; } 100% { opacity: 0; stroke-dashoffset: -110; transform: translateY(-26px); } }
.k-hat { position: absolute; z-index: 2; bottom: var(--y, 12%); left: var(--x); width: 3px; height: 3px; border-radius: 50%; background: #F2DEA8; box-shadow: 0 0 8px 2px rgba(242,222,168,.6); opacity: 0; animation: k-hat-bay var(--t, 2.6s) ease-out infinite; animation-delay: var(--d); }
@keyframes k-hat-bay { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--h, -190px)) scale(1); } }

/* ---------- Vòm sâm ---------- */
.k6__khung img { opacity: 0; transform: scale(1.28); animation: k6-anh 2.4s .3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes k6-anh { 30% { opacity: 1; } to { opacity: 1; transform: scale(1.08); } }
.chao--6 .k__name { margin-top: -52px; }

@media (min-width: 1024px) {
  .chao__in { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .chao *, .chao *::before, .chao *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}