:root{ --qa-bg:#FBFAF7; --qa-card:#FFFFFF; --qa-line:#E7E3DA; --qa-ink:#1E1E1C; --qa-soft:#7A7A72;
  --qa-accent:#A0522D; --qa-accent-d:#8A3F20; --qa-green:#3E7D5A; --qa-pill:#F2EFE8; }
/* Thẻ đăng nhập dùng chung: trang /dang-nhap/ (máy tính) và popup Đăng nhập (màn hình chào trên điện thoại) */
.qa-card,.qa-card *{box-sizing:border-box;}
.qa-card button,.qa-card input{font-family:Arial,"Liberation Sans",Helvetica,sans-serif;}
.qa-card{width:100%;max-width:400px;background:var(--qa-card);border:1px solid var(--qa-line);border-radius:26px;padding:30px 26px 26px;box-shadow:0 10px 30px rgba(30,30,28,.05);}
.qa-brand{display:flex;align-items:center;justify-content:center;margin-bottom:20px;}
.qa-brand img{display:block;width:140px;max-width:60%;height:auto;margin:0 auto;}
.qa-desc{color:var(--qa-soft);font-size:14px;line-height:1.55;margin:0 0 22px;}
.qa-tabs{display:flex;background:var(--qa-pill);border-radius:12px;padding:4px;margin-bottom:20px;}
.qa-tab{flex:1;text-align:center;padding:10px 8px;border-radius:9px;font-weight:700;font-size:14px;cursor:pointer;border:none;background:transparent;color:var(--qa-soft);}
.qa-tab.active{background:#fff;color:var(--qa-ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.qa-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;border:1px solid #D9D6CC;border-radius:12px;padding:12px 14px;font-weight:600;font-size:15px;color:var(--qa-ink);text-decoration:none;cursor:pointer;margin-bottom:18px;}
.qa-google:hover{background:#FAFAF8;}
.qa-divider{display:flex;align-items:center;gap:10px;color:var(--qa-soft);font-size:12px;margin:0 0 18px;}
.qa-divider:before,.qa-divider:after{content:"";flex:1;border-top:1px solid var(--qa-line);}
.qa-field{width:100%;border:1px solid var(--qa-line);border-radius:12px;padding:13px 15px;font-size:15px;margin-bottom:12px;background:#fff;color:var(--qa-ink);}
.qa-field::placeholder{color:#A8A69B;}
.qa-field:focus{outline:none;border-color:var(--qa-green);box-shadow:0 0 0 3px rgba(62,125,90,.12);}
.qa-submit{width:100%;background:var(--qa-accent);color:#fff;border:none;border-radius:12px;padding:14px;font-weight:700;font-size:15px;cursor:pointer;margin-top:4px;}
.qa-submit:hover{background:var(--qa-accent-d);}
.qa-back{display:block;text-align:center;margin-top:20px;color:var(--qa-soft);font-size:14px;text-decoration:none;}
.qa-back:hover{color:var(--qa-ink);}
.qa-err{background:#FBEAE7;border:1px solid #EFC3BA;color:#8A3F20;border-radius:10px;padding:9px 12px;font-size:13px;margin-bottom:14px;}
.qa-pane{display:none;} .qa-pane.active{display:block;}
.qa-card{position:relative;font:15px/1.5 Arial,"Liberation Sans",Helvetica,sans-serif;color:var(--qa-ink);}
.qa-close{position:absolute;top:12px;right:12px;width:34px;height:34px;border:none;border-radius:50%;background:var(--qa-pill);color:var(--qa-soft);font-size:20px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;}
.qa-close:hover{color:var(--qa-ink);}
.qa-card.is-popup .qa-close{display:flex;}
.qa-faceid{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;border:1.5px solid var(--qa-green);border-radius:12px;padding:12px 14px;font-weight:700;font-size:15px;color:var(--qa-green);cursor:pointer;margin-bottom:14px;}
.qa-faceid[hidden]{display:none;}
.qa-faceid:hover{background:#F3F9F5;}
.qa-faceid:disabled{opacity:.6;cursor:default;}
.qa-faceid svg{flex:none;}
.qa-note{color:var(--qa-soft);font-size:13px;margin:-4px 0 14px;text-align:center;}
.qa-note[hidden]{display:none;}
.qa-submit:disabled{opacity:.65;cursor:default;}