/* ---------- Màn chờ ---------- */
.ld{position:fixed;inset:0;z-index:500;display:grid;place-items:center;color:#2B241C;background:transparent;pointer-events:auto}
.ld-half{position:absolute;left:0;right:0;height:50.5%;transition:transform 1.1s cubic-bezier(.76,0,.24,1) .35s}
.ld-top{top:0;background:linear-gradient(180deg,#E7CF9F,#F8EBD0)}
.ld-bot{bottom:0;background:linear-gradient(180deg,#F8EBD0,#FBF6EC)}
.ld-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .5s ease,transform .9s cubic-bezier(.76,0,.24,1)}
.ld-logo{width:clamp(150px,20vw,220px);height:auto;overflow:visible}
.ld-c{fill:none;stroke:#2B241C;stroke-width:1.8;stroke-dasharray:100;stroke-dashoffset:100;stroke-linecap:round;animation:ldDraw 1.1s cubic-bezier(.6,0,.2,1) forwards}
.ld-c1{transform-origin:44px 40px;transform:rotate(-90deg);animation-delay:.1s}
.ld-c2{transform-origin:76px 40px;transform:rotate(90deg);animation-delay:.3s}
@keyframes ldDraw{to{stroke-dashoffset:0}}
.ld-mid{opacity:0;transform-origin:60px 40px;animation:ldMid .5s ease-out 1.15s forwards,ldBeat 1.66s ease-out 1.7s infinite}
@keyframes ldMid{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes ldBeat{0%{transform:scale(1)}10%{transform:scale(1.14)}20%{transform:scale(1)}30%{transform:scale(1.08)}50%,100%{transform:scale(1)}}
.ld-logo{filter:drop-shadow(0 0 0 rgba(184,134,47,0));animation:ldGlow 1.66s ease-out 1.7s infinite}
@keyframes ldGlow{10%{filter:drop-shadow(0 0 18px rgba(184,134,47,.65))}50%,100%{filter:drop-shadow(0 0 4px rgba(184,134,47,.2))}}
.ld-word{display:flex;font-family:var(--f-display);font-weight:300;font-size:clamp(46px,7vw,84px);letter-spacing:-.05em;line-height:1;overflow:hidden;padding-bottom:.08em}
.ld-word span{display:inline-block;transform:translateY(110%);animation:ldUp .8s cubic-bezier(.2,.7,.1,1) forwards}
.ld-word .sp{width:.28em}
.ld-word span:nth-child(1){animation-delay:1.0s}.ld-word span:nth-child(2){animation-delay:1.05s}.ld-word span:nth-child(3){animation-delay:1.1s}.ld-word span:nth-child(4){animation-delay:1.15s}.ld-word span:nth-child(6){animation-delay:1.25s}.ld-word span:nth-child(7){animation-delay:1.3s}.ld-word span:nth-child(8){animation-delay:1.35s}.ld-word span:nth-child(9){animation-delay:1.4s}
@keyframes ldUp{to{transform:none}}
.ld-sub{margin:0;font-family:var(--f-body);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7A6E5E;opacity:0;animation:ldFade .8s ease 1.6s forwards;text-align:center;padding-inline:16px}
@keyframes ldFade{to{opacity:1}}
.ld-foot{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(30px + env(safe-area-inset-bottom,0px));display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--f-body);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7A6E5E;transition:opacity .4s}
.ld-pct{font-family:var(--f-display);font-weight:200;font-size:clamp(40px,6vw,72px);letter-spacing:-.05em;line-height:.8;color:#2B241C;font-variant-numeric:tabular-nums}
.ld-bar{position:absolute;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);height:2px;background:rgba(43,36,28,.06);transition:opacity .4s}
.ld-bar i{display:block;height:100%;background:linear-gradient(90deg,#8C6324,#B8862F,#9A6E22);transform-origin:left;transform:scaleX(0);box-shadow:0 0 12px #B8862F}
.ld.out{pointer-events:none}
.ld.out .ld-in{opacity:0;transform:scale(.94);transition-delay:0s,0s}
.ld.out .ld-foot,.ld.out .ld-bar{opacity:0}
.ld.out .ld-top{transform:translateY(-101%)}
.ld.out .ld-bot{transform:translateY(101%)}
html.is-loading body{overflow:hidden}
html.is-loading .hero-mark,html.is-loading .hero-title,html.is-loading .hero-meta,html.is-loading .hero-cta{animation-play-state:paused}
html.loaded .hero-mark{animation-delay:.55s}html.loaded .hero-title{animation-delay:.7s}html.loaded .hero-meta{animation-delay:.9s}html.loaded .hero-cta{animation-delay:1.05s}
@media (prefers-reduced-motion:reduce){.ld *{animation:none!important}.ld-c{stroke-dashoffset:0}.ld-mid,.ld-sub{opacity:1}.ld-word span{transform:none}.ld-half{transition:opacity .3s}.ld.out{opacity:0;transition:opacity .3s}}


/* thông tin phần mở đầu: nền kính mờ cho dễ đọc trên video */
.hero-meta{background:rgba(251,246,236,.5);border:1px solid rgba(43,36,28,.1);border-radius:10px;padding:18px 22px;color:#4A3F33}
.hero-meta small{color:#2B241C;font-weight:600}
.hero-meta p{color:#4A3F33}
.hero-meta ul{color:#5A4D3E}
@media (max-width:640px){.hero-meta{padding:16px}}
.hero .hero-cta .btn.ghost{background:rgba(251,246,236,.55);border-color:rgba(43,36,28,.18)}