/* [12/10] VỎ ĐĂNG NHẬP WOW — CLONE từ SYND `dang-nhap-dai-man-2026-09-27.css` (CEO 27/09 chốt: video HK ngả xám + phủ tối + thẻ kính +
   MỘT màu nhấn, hiệu ứng tiết chế). CEO 12/10: "ngầu, hongkong như synd luôn… chỉ thay đổi sơ bộ màu sắc" ⇒ giữ nguyên bố cục/hiệu ứng,
   đổi VÀNG KIM → CAM SHOPEE (bụi cam, vệt sáng cam, viền chạy cam, vạch vào hệ cam). Tiền tố wdn- (SYND là dnm-).
   Điện thoại: không dựa vào backdrop-filter — nền thẻ là màu đặc bán trong; giảm chuyển động thì tắt hết hiệu ứng lặp. */

.wdn-man { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #050304; color: #f2e6df; isolation: isolate; }
.wdn-lop { position: absolute; inset: 0; pointer-events: none; }
.wdn-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.5) brightness(0.48) contrast(1.15) saturate(0.85); }
.wdn-mono { font-family: var(--wow-font-mono); font-size: 11px; letter-spacing: .14em; }
.wdn-mo { opacity: .55; }
.wdn-giua { position: relative; z-index: 5; height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px 48px; overflow-y: auto; }
@keyframes wdn-xoay { to { transform: rotate(360deg); } }

/* hạt phim rất nhạt */
.wdn-hat-phim { opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: wdn-hat .5s steps(4) infinite; }
@keyframes wdn-hat { 0% { transform: translate(0,0); } 25% { transform: translate(-30px,20px); } 50% { transform: translate(20px,-40px); } 75% { transform: translate(-10px,35px); } }

/* bốn góc khung mảnh */
.wdn-goc { position: absolute; width: 22px; height: 22px; border: 0 solid #EE4D2D; opacity: .45; z-index: 4; }
.wdn-goc-tt { top: 10px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.wdn-goc-tp { top: 10px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.wdn-goc-dt { bottom: 10px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.wdn-goc-dp { bottom: 10px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

.wdn-xam { background: #000; mix-blend-mode: saturation; opacity: .45; }
.wdn-toi { background: linear-gradient(135deg, rgba(0,0,0,.85), rgba(0,0,0,.6) 50%, rgba(0,0,0,.9)); }
.wdn-vien-toi { background: radial-gradient(ellipse at center, transparent 25%, rgba(0,0,0,.78) 90%); }
/* ánh cam rất nhẹ phủ phố đêm — chỗ duy nhất khác SYND ngoài màu nhấn */
.wdn-ung-cam { background: radial-gradient(900px 520px at 70% 110%, rgba(238,77,45,.16), transparent 65%); }
/* vệt sáng chéo, thở chậm */
.wdn-tia { overflow: hidden; }
.wdn-tia span { position: absolute; top: -30%; width: 22vw; min-width: 160px; height: 160%; transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,122,80,.08), transparent); animation: wdn-tho 9s ease-in-out infinite; }
.wdn-tia span:first-child { left: 18%; }
.wdn-tia span:last-child { left: 62%; width: 14vw; animation-delay: -4.5s; }
@keyframes wdn-tho { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
/* bụi cam bay lên */
.wdn-bui span { position: absolute; bottom: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,170,130,.95), rgba(238,77,45,0) 70%);
  animation: wdn-bay linear infinite; }
@keyframes wdn-bay { from { transform: translate(0, 0); } 50% { transform: translate(18px, -55vh); } to { transform: translate(-10px, -110vh); } }
/* thẻ: viền có luồng sáng cam chạy vòng */
.wdn-vien { position: relative; width: min(420px, 100%); border-radius: 20px; padding: 1px; overflow: hidden; isolation: isolate;
  background: rgba(238,77,45,.16); box-shadow: 0 20px 80px -20px rgba(0,0,0,.85); animation: wdn-len .9s cubic-bezier(.2,.7,.2,1) both; }
.wdn-vien-quay { position: absolute; left: 50%; top: 50%; width: 200%; aspect-ratio: 1; margin-left: -100%; margin-top: -100%; z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 290deg, rgba(238,77,45,.18) 320deg, rgba(255,160,120,.95) 352deg, transparent 360deg);
  animation: wdn-xoay 7s linear infinite; }
.wdn-the { position: relative; border-radius: 19px; padding: 26px; background: rgba(18,13,12,.9); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: grid; gap: 14px; }
@media (min-width: 640px) { .wdn-the { padding: 40px; } }
@keyframes wdn-len { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* logo SYND (nhánh của SYND) đẩy sắc sang cam + loé ánh — lớp sáng cắt theo đúng hình logo */
.wdn-logo { position: relative; margin: 0 auto; width: min(260px, 100%); }
.wdn-logo img { display: block; width: 100%; height: auto; filter: hue-rotate(-28deg) saturate(1.7) brightness(1.05) drop-shadow(0 4px 24px rgba(238,77,45,.22)); user-select: none; pointer-events: none; }
.wdn-logo::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,228,214,.85) 50%, transparent 62%) no-repeat; background-size: 250% 100%;
  -webkit-mask: url(/logo/synd-logo-full.png?v=7bdd077360) center / contain no-repeat; mask: url(/logo/synd-logo-full.png?v=7bdd077360) center / contain no-repeat;
  animation: wdn-loe 6.5s ease-in-out infinite; }
@keyframes wdn-loe { 0%, 55% { background-position: 130% 0; } 85%, 100% { background-position: -30% 0; } }
.wdn-ten { text-align: center; display: grid; gap: 4px; }
.wdn-ten b { font-family: var(--wow-font-chu); font-weight: 200; font-size: 30px; letter-spacing: .5em; padding-left: .5em; }
.wdn-ten span { font-family: var(--wow-font-mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,170,130,.7); }

.wdn-nhan { font-family: var(--wow-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--wow-chu-3); }
.wdn-o { width: 100%; height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  color: #f6f0ec; font: inherit; font-size: 16px; }
.wdn-o:focus { outline: none; border-color: rgba(255,122,80,.75); box-shadow: 0 0 0 3px rgba(238,77,45,.18); }
.wdn-nut { width: 100%; min-height: 48px; border: 0; border-radius: 10px; cursor: pointer; font-family: var(--wow-font-mono); font-weight: 600; font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #FF6A40, #EE4D2D 60%, #C93A1E);
  box-shadow: 0 10px 30px -8px rgba(238,77,45,.6), inset 0 1px 0 rgba(255,255,255,.25); transition: filter .2s; }
.wdn-nut:hover { filter: brightness(1.12); }
.wdn-nut:disabled { opacity: .5; cursor: default; filter: none; }
.wdn-loi { margin: 0; min-height: 1.4em; text-align: center; font-size: 13px; color: var(--wow-xau); }
.wdn-gio { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(255,140,100,.55); z-index: 5; pointer-events: none; }

/* vào hệ: vạch cam toả ngang rồi tối dần */
.wdn-vach { z-index: 30; }
.wdn-vach::before, .wdn-vach::after { content: ''; position: absolute; opacity: 0; }
.wdn-vach::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; transform: scaleX(0);
  background: linear-gradient(90deg, transparent, #FF8A5C 30%, #FFE4D6 50%, #FF8A5C 70%, transparent); box-shadow: 0 0 24px rgba(255,122,80,.85); }
.wdn-vach::after { inset: 0; background: #000; }
.wdn-man.wdn-vao .wdn-vach::before { animation: wdn-vach-toa .6s cubic-bezier(.2,.7,.2,1) .15s forwards; }
.wdn-man.wdn-vao .wdn-vach::after { animation: wdn-tat .5s ease-in .7s forwards; }
.wdn-man.wdn-vao .wdn-vien { animation: wdn-di .5s ease-in forwards; }
@keyframes wdn-vach-toa { to { opacity: 1; transform: scaleX(1); } }
@keyframes wdn-tat { to { opacity: 1; } }
@keyframes wdn-di { to { opacity: 0; transform: translateY(-8px); } }

@media (prefers-reduced-motion: reduce) {
  .wdn-hat-phim, .wdn-tia span, .wdn-bui span, .wdn-vien-quay, .wdn-logo::after { animation: none; }
}