/* Cổng vào: đăng nhập + kích hoạt tài khoản. Điện thoại: đầu trang xanh ngọc + thẻ nổi. Máy tính: chia đôi. */
body { background: var(--bg); }
.pt { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.pt-brand { position: relative; overflow: hidden; color: #fff; text-align: center; padding: max(46px, env(safe-area-inset-top)) 28px 78px; background: linear-gradient(180deg, var(--teal-dd) 0%, var(--teal-d) 100%); }
.pt-brand > * { position: relative; }
.pt-brand .art { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 38%; pointer-events: none; }
.art-ground { fill: var(--bg); }
.pt-brand .brand { width: 72px; height: 72px; border-radius: 24px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.5rem; margin: 0 auto 16px; animation: fin .6s var(--ease) both; }
.pt-brand h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; animation: fin .6s var(--ease) .05s both; }
.pt-brand .tag { opacity: .88; margin-top: 8px; font-size: .95rem; animation: fin .6s var(--ease) .1s both; }
.feats { display: none; list-style: none; padding: 0; margin: 34px 0 0; }
.feats li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; animation: fin .6s var(--ease) .2s both; }
.feats li:nth-child(2) { animation-delay: .28s; } .feats li:nth-child(3) { animation-delay: .36s; }
.feats b { display: block; font-size: 1rem; }
.feats small { display: block; opacity: .8; font-size: .86rem; margin-top: 2px; }
.pt-main { flex: 1; position: relative; margin-top: -40px; padding: 0 18px 28px; outline: 0; }
.pt-card { max-width: 460px; margin: 0 auto; padding: 22px 20px 24px; box-shadow: var(--sh2); animation: fin .55s var(--ease) .12s both; }
.pt-card h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.015em; }
.pt-card .lead { color: var(--soft); font-size: .92rem; margin: 4px 0 16px; }
.pt-card .seg { margin-bottom: 18px; }
.pt-msg { margin-bottom: 14px; }
.pt-foot { max-width: 460px; margin: 18px auto 0; text-align: center; color: var(--faint); font-size: .76rem; line-height: 1.6; }
.pt-help { text-align: center; margin-top: 16px; font-size: .84rem; color: var(--faint); }
.pt-welcome { text-align: center; padding: 10px 0 4px; }
.pt-welcome .av { margin: 0 auto 12px; }
.strength { display: flex; gap: 5px; margin-top: 8px; } .strength i { flex: 1; height: 5px; border-radius: 5px; background: var(--line); transition: background .3s; }
.strength[data-s="1"] i:nth-child(-n+1) { background: var(--bad); } .strength[data-s="2"] i:nth-child(-n+2) { background: var(--amber); }
.strength[data-s="3"] i:nth-child(-n+3) { background: var(--teal); } .strength[data-s="4"] i { background: var(--green); }
.demo { margin-top: 18px; border: 1.5px dashed var(--line); border-radius: 16px; padding: 4px 14px; font-size: .84rem; color: var(--soft); }
.demo summary { cursor: pointer; font-weight: 800; min-height: 40px; display: flex; align-items: center; }
.demo .chips { padding: 4px 0 12px; }
.demo .chip { min-height: 40px; padding: 7px 13px; font-size: .8rem; }
@media (min-width: 900px) {
  .pt { flex-direction: row; }
  .pt-brand { flex: 0 0 46%; max-width: 760px; text-align: left; display: flex; flex-direction: column; justify-content: center; padding: 64px clamp(40px, 5vw, 80px) 120px; }
  .pt-brand .brand { margin: 0 0 22px; width: 78px; height: 78px; }
  .pt-brand h1 { font-size: clamp(2rem, 3vw, 2.7rem); }
  .pt-brand .tag { font-size: 1.1rem; }
  .pt-brand .art { height: 30%; } .art-ground { fill: var(--teal-dd); opacity: .55; }
  .feats { display: block; }
  .pt-main { margin: 0; display: flex; flex-direction: column; justify-content: center; padding: 40px clamp(24px, 4vw, 64px); }
  .pt-card { width: 100%; padding: 30px 30px 28px; }
}