/* File này được gói lên đầu bundle: khai báo thứ tự tầng ở đây để tầng luôn đúng thứ tự (giống styles.css). */
@layer tokens, legacy, components, screens;
/* Cùng tầng legacy với CSS cũ, đứng trước CSS của app như trước khi có @layer. */
@layer legacy {
/* Màn đăng nhập "gà gáy, trời sáng" (từ docs/thiet-ke-giao-dien/dang-nhap-ga-gay.html). Mọi class có tiền tố ls-. */
.ls-scene{position:relative;width:100%;height:100vh;height:100dvh;min-height:600px;overflow:hidden}

/* ===== Bầu trời ===== */
.ls-sky{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.ls-sky-night{background:linear-gradient(#0b1530,#1e2a4f 55%,#2c3a63)}
.ls-sky-dawn{background:linear-gradient(#3b2a5a,#c2577a 38%,#f08a5d 62%,#fbd38d)}
.ls-sky-day{background:linear-gradient(#a7dccf,#d7efe8 50%,#f3faf7)}
.ls-sky-gray{background:linear-gradient(#64748b,#94a3b8 60%,#cbd5e1)}
.is-night .ls-sky-night,.is-crow .ls-sky-night,.is-evening .ls-sky-night{opacity:1}
.is-crow .ls-sky-dawn{opacity:.45}
.is-dawn .ls-sky-dawn,.is-dusk .ls-sky-dawn{opacity:1}
.is-day .ls-sky-day,.is-sunset .ls-sky-day{opacity:1}
.w-cloud.is-day .ls-sky-gray,.w-cloud.is-sunset .ls-sky-gray{opacity:.4}
.w-rain.is-day .ls-sky-gray,.w-rain.is-sunset .ls-sky-gray{opacity:.75}
.w-rain.is-dawn .ls-sky-gray,.w-rain.is-dusk .ls-sky-gray{opacity:.45}

.ls-stars{position:absolute;inset:0 0 35% 0;opacity:0;transition:opacity 1s ease;background-image:radial-gradient(1.4px 1.4px at 20px 30px,#fff 99%,transparent),radial-gradient(1px 1px at 120px 80px,#e2e8f0 99%,transparent),radial-gradient(1.6px 1.6px at 70px 150px,#fff 99%,transparent),radial-gradient(1px 1px at 180px 20px,#cbd5e1 99%,transparent),radial-gradient(1.2px 1.2px at 160px 125px,#fff 99%,transparent);background-size:220px 180px;animation:ls-twinkle 2.6s ease-in-out infinite alternate}
.is-night .ls-stars{opacity:1}.is-crow .ls-stars{opacity:.5}.is-evening .ls-stars{opacity:.85}
.w-rain .ls-stars{opacity:0!important}
@keyframes ls-twinkle{from{filter:brightness(.55)}to{filter:brightness(1.25)}}

.ls-clouds{position:absolute;inset:0;pointer-events:none;opacity:.15;transition:opacity 1.2s ease}
.is-dawn .ls-clouds,.is-dusk .ls-clouds,.is-crow .ls-clouds{opacity:.55}
.is-day .ls-clouds,.is-sunset .ls-clouds{opacity:.95}
.ls-cloud{position:absolute;left:0;width:120px;height:36px;background:#fff;border-radius:40px;animation:ls-drift 80s linear infinite;transition:background 1s ease}
.ls-cloud::before,.ls-cloud::after{content:'';position:absolute;border-radius:50%;background:inherit}
.ls-cloud::before{width:50px;height:50px;left:16px;top:-24px}
.ls-cloud::after{width:64px;height:64px;left:46px;top:-34px}
.ls-c1{top:14%;animation-duration:90s;animation-delay:-20s}
.ls-c2{top:24%;scale:.7;animation-duration:70s;animation-delay:-55s}
.ls-c3{top:7%;scale:.85;animation-duration:110s;animation-delay:-80s}
.ls-c4,.ls-c5,.ls-c6{display:none}
.ls-c4{top:18%;scale:1.2;animation-duration:75s;animation-delay:-5s}
.ls-c5{top:29%;animation-duration:95s;animation-delay:-40s}
.ls-c6{top:4%;scale:1.4;animation-duration:120s;animation-delay:-60s}
.w-cloud .ls-c4,.w-cloud .ls-c5,.w-cloud .ls-c6,.w-rain .ls-c4,.w-rain .ls-c5,.w-rain .ls-c6{display:block}
.w-cloud .ls-cloud{background:#e2e8f0}
.w-rain .ls-cloud{background:#94a3b8}
@keyframes ls-drift{from{transform:translateX(-220px)}to{transform:translateX(calc(100vw + 220px))}}

/* Mưa: mây đen phủ trên cao, giọt mưa hai lớp xa/gần, gợn nước dưới đất */
.ls-storm{position:absolute;left:-10%;right:-10%;top:-60px;height:260px;opacity:0;pointer-events:none;transition:opacity 1s ease;
  background:radial-gradient(closest-side,#475569,transparent) 0 40px/320px 170px repeat-x,radial-gradient(closest-side,#334155,transparent) 150px 0/380px 200px repeat-x,radial-gradient(closest-side,#64748b,transparent) 60px 90px/300px 150px repeat-x;
  animation:ls-storm 40s linear infinite}
@keyframes ls-storm{to{background-position:320px 40px,530px 0,360px 90px}}
.w-rain .ls-storm{opacity:.95}
.is-night.w-rain .ls-storm,.is-evening.w-rain .ls-storm{opacity:.7}
.ls-rain{position:absolute;inset:0;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .8s ease}
.w-rain .ls-rain{opacity:1}
.ls-drop{position:absolute;top:-30px;width:1.5px;height:var(--len);border-radius:1px;background:linear-gradient(transparent,rgba(226,236,255,var(--a)));transform:rotate(10deg);animation:ls-fall var(--d) linear infinite;animation-delay:var(--delay)}
@keyframes ls-fall{to{translate:calc(var(--fall) * -.18) var(--fall)}}
.ls-ripple{position:absolute;width:18px;height:5px;margin-left:-9px;border:1.5px solid rgba(226,236,255,.7);border-radius:50%;opacity:0;animation:ls-ripple var(--d) ease-out infinite;animation-delay:var(--delay)}
@keyframes ls-ripple{0%{transform:scale(.2);opacity:.9}100%{transform:scale(1.8);opacity:0}}
.w-rain .ls-glow{opacity:.55}
.w-rain.is-evening .ls-glow{opacity:1}

/* ===== Cảnh làng (khung 390×844, neo đáy màn hình) ===== */
.ls-world{position:absolute;left:50%;bottom:0;width:390px;height:844px;transform:translateX(-50%)}
.ls-moon{position:absolute;left:36px;top:150px;width:40px;height:40px;border-radius:50%;box-shadow:11px 4px 0 0 #fde68a;transition:opacity 1s ease,transform 1.4s ease}
.is-dawn .ls-moon,.is-day .ls-moon,.is-pre .ls-moon,.is-sunset .ls-moon,.is-dusk .ls-moon{opacity:0;transform:translateY(40px)}
.f-trungthu .ls-moon{left:30px;top:130px;width:60px;height:60px;background:#fde68a;box-shadow:0 0 40px 10px rgba(253,230,138,.45)}
/* Buổi tối trăng mọc phía đông (bên phải), rạng sáng trăng lặn phía tây (bên trái) */
.is-evening .ls-moon{left:296px;top:96px}
.is-evening.f-trungthu .ls-moon{left:286px;top:80px}
/* Mặt trời: mọc bên phải (đông, gà quay mặt về phía đó), trưa lên đỉnh, chiều ngả trái (tây), lặn bên trái */
.ls-sun{position:absolute;left:262px;top:560px;width:80px;height:80px;border-radius:50%;background:radial-gradient(#fde68a,#fbbf24 60%,#f59e0b);box-shadow:0 0 60px 22px rgba(251,191,36,.45);transition:top 1.4s cubic-bezier(.2,.7,.2,1),left 1.4s cubic-bezier(.2,.7,.2,1),opacity 1s ease}
.is-crow .ls-sun{top:470px}
.is-dawn .ls-sun{top:300px}
.is-day .ls-sun,.is-pre .ls-sun{box-shadow:0 0 50px 16px rgba(251,191,36,.35)}
.t-morning.is-day .ls-sun,.t-morning.is-pre .ls-sun{left:268px;top:96px}
.t-noon.is-day .ls-sun,.t-noon.is-pre .ls-sun{left:155px;top:40px}
.t-afternoon.is-day .ls-sun,.t-afternoon.is-pre .ls-sun{left:40px;top:96px}
.is-sunset .ls-sun{left:34px;top:190px}
.is-dusk .ls-sun{left:24px;top:330px}
.is-evening .ls-sun{left:24px;top:560px}
/* is-pre: cảnh ban ngày chưa hiện form, để form trượt lên khi mở app buổi trưa/chiều */
.is-pre .ls-sky-day{opacity:1}.is-pre .ls-clouds{opacity:.95}.is-pre .ls-lit{filter:none}
.w-cloud .ls-sun{opacity:.65}.w-rain .ls-sun{opacity:.2}

.ls-lit{transition:filter 1.2s ease;filter:brightness(.35) saturate(.6)}
.is-crow .ls-lit{filter:brightness(.5) saturate(.7)}
.is-dawn .ls-lit,.is-dusk .ls-lit{filter:brightness(.82) saturate(.9)}
.is-day .ls-lit,.is-sunset .ls-lit{filter:none}
.is-evening .ls-lit{filter:brightness(.5) saturate(.7)}
.w-rain.is-day .ls-lit,.w-rain.is-sunset .ls-lit{filter:brightness(.8) saturate(.8)}
.ls-land{position:absolute;left:-1005px;top:200px}
.ls-bd{fill:var(--brand);transition:fill .4s ease}
.ls-wall{fill:color-mix(in srgb,var(--brand) 18%,#ffffff);transition:fill .4s ease}
/* Bảng hiệu: tên cửa hàng gắn trước mái, màu theo tiệm, tối thì chữ sáng đèn */
.ls-signboard{position:absolute;left:205px;top:331px;width:142px;height:22px;transform:translateX(-50%);box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0 12px;overflow:hidden;border:2px solid #5b3a1a;border-radius:2px;
  background:radial-gradient(circle at 5px 50%,#fde68a 1.4px,transparent 1.9px),radial-gradient(circle at calc(100% - 5px) 50%,#fde68a 1.4px,transparent 1.9px),linear-gradient(var(--brand),var(--brand));
  color:#fff;font:800 13px/1 'Be Vietnam Pro',system-ui,sans-serif;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;box-shadow:0 3px 0 rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.3);transition:filter 1.2s ease,text-shadow .8s ease}
.is-evening .ls-signboard{filter:none;color:#fffbeb;text-shadow:0 0 6px rgba(253,230,138,.9)}
/* Hai đèn rọi biển hiệu, tối thì bật */
.ls-lamp{position:absolute;top:326px;z-index:1;width:10px;height:5px;border-radius:2px 2px 5px 5px;background:#334155;transition:box-shadow .8s ease}
.ls-lamp::before{content:'';position:absolute;left:4px;top:-4px;width:2px;height:4px;background:#334155}
.ls-lamp{opacity:0;transition:opacity .6s ease,box-shadow .8s ease}
.is-evening .ls-lamp{opacity:1;background:#fde68a;box-shadow:0 5px 14px 5px rgba(253,230,138,.55)}

.ls-smoke{position:absolute;left:250px;top:298px;width:12px;height:12px;border-radius:50%;background:rgba(241,245,249,.75);opacity:0;animation:ls-rise 4.2s ease-out infinite}
.ls-s2{animation-delay:-1.4s}.ls-s3{animation-delay:-2.8s}
@keyframes ls-rise{0%{transform:translate(0,0) scale(.6);opacity:.75}100%{transform:translate(-22px,-80px) scale(2.4);opacity:0}}
.ls-glow{position:absolute;top:380px;width:26px;height:16px;border-radius:2px;background:#fde68a;box-shadow:0 0 18px 6px rgba(253,230,138,.6);opacity:0;transition:opacity .8s ease .5s}
.is-evening .ls-glow{opacity:1}
.ls-glow-shop{background:#fbbf24;mix-blend-mode:screen}
.ls-scene .ls-glow-shop{opacity:0}
.is-evening .ls-glow-shop,.w-rain.is-evening .ls-glow-shop{opacity:.45}
.ls-shutter{transform-box:fill-box;transform-origin:50% 0;transform:scaleY(0);transition:transform 1s ease .3s}
.t-late .ls-shutter{transform:scaleY(1)}
.t-late.is-evening .ls-glow-shop{opacity:.18}
.t-late .ls-lamp{opacity:0}
.t-late.is-evening .ls-signboard{text-shadow:none;color:#e2e8f0}

.ls-rooster{position:absolute;left:44px;top:321px}
.ls-head{transform-origin:74px 64px}
.ls-beak-low{transform-origin:94px 40px}
.ls-eye{transform-origin:89px 36px;animation:ls-blink 4.5s infinite}
.is-day .ls-head{animation:ls-peck 9s ease-in-out infinite}
.is-crow .ls-head{animation:ls-crow 1.3s ease-in-out}
.is-crow .ls-beak-low{animation:ls-beak 1.3s ease-in-out}
.ls-chick{transform-box:fill-box;transform-origin:50% 100%;animation:ls-pick 1.6s ease-in-out infinite}
@keyframes ls-pick{0%,60%,100%{transform:none}75%{transform:rotate(14deg) translateY(.6px)}}
.no .ls-head{animation:ls-no .45s ease-in-out 3}
@keyframes ls-crow{0%{transform:rotate(0)}20%,75%{transform:rotate(-24deg)}100%{transform:rotate(0)}}
@keyframes ls-beak{0%,15%{transform:rotate(0)}25%,70%{transform:rotate(28deg)}100%{transform:rotate(0)}}
@keyframes ls-peck{0%,78%,100%{transform:rotate(0)}83%,93%{transform:rotate(40deg)}88%{transform:rotate(30deg)}}
@keyframes ls-blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes ls-no{25%{transform:rotate(9deg)}75%{transform:rotate(-9deg)}}
.ls-bubble{position:absolute;left:16px;top:262px;padding:10px 16px;border-radius:18px;background:#fff;color:#7c2d12;font-weight:800;font-size:22px;letter-spacing:.5px;opacity:0;transform:scale(.6);transform-origin:0 100%;transition:opacity .25s ease,transform .25s ease;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.ls-bubble::after{content:'';position:absolute;left:64px;bottom:-9px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.is-crow .ls-bubble{opacity:1;transform:scale(1)}

/* Trang trí dịp lễ */
.ls-ind{display:none}
.i-tap_hoa .ls-ind-tap_hoa,.i-vlxd .ls-ind-vlxd,.i-dien_thoai .ls-ind-dien_thoai,.i-chung .ls-ind-chung{display:inline}
.ls-deco{display:none}
.f-tet .ls-deco-tet,.f-trungthu .ls-deco-tt,.f-noel .ls-deco-noel{display:inline}
.ls-deco-tt .ls-star{filter:drop-shadow(0 0 6px rgba(248,113,113,.9))}
.ls-deco-noel circle{animation:ls-bulb 1.2s steps(2) infinite}
.ls-deco-noel circle:nth-child(2n){animation-delay:-.6s}
@keyframes ls-bulb{50%{opacity:.25}}

/* ===== Nút trên cùng ===== */
.ls-topbtn{position:absolute;top:16px;right:16px;z-index:3;min-height:44px;padding:0 16px;border-radius:22px;border:1px solid rgba(255,255,255,.35);background:rgba(15,23,42,.4);color:#fff;font:600 15px 'Be Vietnam Pro',system-ui,sans-serif;cursor:pointer}
.is-day .ls-topbtn,.is-sunset .ls-topbtn{border-color:rgba(19,78,74,.25);background:rgba(255,255,255,.75);color:#134e4a}
.ls-sound,.ls-iconbtn{width:44px;padding:0;display:flex;align-items:center;justify-content:center}
.ls-sound{left:16px;right:auto}
.ls-replay{display:none}
.is-day .ls-skip,.is-evening .ls-skip{display:none}
.is-day .ls-replay,.is-evening .ls-replay{display:flex}

/* ===== Form ===== */
.ls-card{position:absolute;left:0;right:0;bottom:0;z-index:2;max-width:480px;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;gap:14px;padding:24px 24px 28px;background:var(--surface);color:var(--ink);border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(15,23,42,.18);transform:translateY(105%);opacity:0;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.is-day .ls-card,.is-evening .ls-card{transform:none;opacity:1}
.ls-shake{animation:ls-shake .4s ease}
@keyframes ls-shake{20%{translate:-8px 0}40%{translate:8px 0}60%{translate:-5px 0}80%{translate:5px 0}}
.ls-logo{width:48px;height:48px;flex:none;border-radius:14px;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;transition:background .4s ease}
.ls-fest{margin:0;align-self:flex-start;padding:4px 12px;border-radius:999px;background:#fef2f2;color:#991b1b;font-size:13px;font-weight:700}
.ls-fest:empty{display:none}
.ls-field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--label)}
.ls-inwrap{position:relative;display:flex}
.ls-inwrap input{flex:1}
.ls-field input{min-width:0;height:48px;box-sizing:border-box;padding:0 14px;border:1px solid var(--field);border-radius:12px;font:500 16px 'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink);background:var(--surface);outline:none}
.ls-field input:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}
.ls-field input[aria-invalid="true"]{border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.ls-pw{padding-right:52px}
.ls-eye-btn{position:absolute;right:2px;top:2px;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ls-eye-btn:hover{color:var(--ink);background:var(--soft)}
.ls-ferr{margin:0;font-size:13px;font-weight:500;color:#b91c1c}
.ls-ferr:empty{display:none}
.ls-banner{margin:0;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#fef2f2;border:1px solid #fecaca;color:#991b1b;font-size:14px;font-weight:500;line-height:1.45}
.ls-banner[hidden]{display:none}
.ls-primary{height:52px;border:0;border-radius:14px;background:var(--brand);color:#fff;font:700 17px 'Be Vietnam Pro',system-ui,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .4s ease}
.ls-primary:hover{filter:brightness(.92)}
.ls-primary:disabled{cursor:progress;opacity:.85}
.ls-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;animation:ls-spin .8s linear infinite}
@keyframes ls-spin{to{transform:rotate(360deg)}}

/* ===== Máy tính: cảnh trải ngang, form bên phải ===== */
@media (min-width:900px){
  /* --s do script tính theo chiều cao màn hình, để trăng, mặt trời và bong bóng luôn nằm trong khung */
  .ls-world{left:34%;transform:translateX(-50%) scale(var(--s,1));transform-origin:50% 100%}
  .ls-card{left:auto;right:max(40px,7vw);top:50%;bottom:auto;width:400px;max-width:none;margin:0;border-radius:28px;box-shadow:0 20px 60px rgba(15,23,42,.28);transform:translateY(calc(-50% + 40px))}
  .is-day .ls-card,.is-evening .ls-card{transform:translateY(-50%)}
}

/* Giảm chuyển động / tab ẩn: dừng mọi chuyển động lặp */
@media (prefers-reduced-motion:reduce){
  .ls-stars,.ls-cloud,.ls-storm,.ls-smoke,.ls-eye,.ls-head,.ls-chick,.ls-deco-noel circle{animation:none!important}
  .ls-smoke,.ls-drop,.ls-ripple{display:none}
}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}


/* Phần riêng của app */
.ls-head-row{display:flex;align-items:center;gap:12px}
.ls-title{margin:0;font-size:22px;font-weight:800;color:var(--ink)}
.ls-sub{margin:0;font-size:14px;color:var(--muted)}
.ls-greet{margin:0;font-size:16px;font-weight:600;color:#9a3412;text-wrap:balance}
.ls-hint{margin:0;font-size:14px;color:var(--muted);text-align:center}
.ls-eye-btn svg,.ls-topbtn svg{width:22px;height:22px;flex:none}
.ls-logo-img{width:48px;height:48px;border-radius:14px;object-fit:cover}
.ls-field label{color:inherit}
:root[data-theme="dark"] .ls-greet{color:#fdba74}
:root[data-theme="dark"] .ls-banner{background:#3b1418;border-color:#7f1d1d;color:#fecaca}
:root[data-theme="dark"] .ls-ferr{color:#fca5a5}
:root[data-theme="dark"] .ls-fest{background:#3b1418;color:#fecaca}

/* Giống bản thiết kế (docs/thiet-ke-giao-dien/dang-nhap-ga-gay.html): chiều cao dòng mặc định, không kế thừa 1.5 của app. */
.ls-scene{line-height:normal}
.ls-scene label{display:block;margin:0;font:inherit;color:inherit}
.ls-scene input,.ls-scene button{margin:0}
/* Giống bản thiết kế: cỡ chữ gốc 16px, màu chữ phụ và viền ô của bản thiết kế (giao diện sáng), chừa chỗ nút con mắt, nút không ăn lề chung. */
.ls-scene{font-size:16px}
:root:not([data-theme="dark"]) .ls-scene{--muted:#475569;--field:#cbd5e1}
.ls-field input.ls-pw{padding-right:52px}
.ls-scene .ls-eye-btn,.ls-scene .ls-primary{padding:0}

}