/* ===== HHA DIGITAL — Trang đăng nhập quản trị (mẫu C "Brand Sweep") ===== */
body.login.hha-login{
  --hha-col: clamp(480px, 43vw, 680px);
  --hha-navy:#0B2A4A; --hha-navy-2:#123A6B; --hha-blue:#1B63A6; --hha-teal:#2BB3B1;
  --hha-orange:#F97316; --hha-gold:#F4B93E; --hha-ink:#0F172A; --hha-muted:#475569; --hha-line:#D9E2EC;
  position:relative; margin:0; min-height:100vh; width:var(--hha-col); box-sizing:border-box;
  padding:124px 72px 96px; display:flex; flex-direction:column; justify-content:center;
  background:#fff; color:var(--hha-ink);
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif; font-size:15px;
}
html:has(body.hha-login){background:#fff}
body.hha-login a{color:var(--hha-blue)}
body.hha-login a:hover,body.hha-login a:focus{color:var(--hha-navy-2)}

/* Keyframes */
@keyframes hhaDraw{from{stroke-dashoffset:1500}to{stroke-dashoffset:0}}
@keyframes hhaFloat{0%,100%{transform:translate(0,0)}50%{transform:translate(-14px,10px)}}
@keyframes hhaPulse{0%,100%{opacity:1}50%{opacity:.55}}
@keyframes hhaUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes hhaShake{0%,100%{transform:none}20%{transform:translateX(-10px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
@keyframes hhaEq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes hhaSweep{from{transform:translateX(105%)}to{transform:translateX(0)}}
@keyframes hhaFade{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes hhaShim{from{background-position:-400px 0}to{background-position:400px 0}}
@keyframes hhaMarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes hhaSun{0%,100%{transform:rotate(0deg)}50%{transform:rotate(8deg)}}

/* Thương hiệu góc trên trái */
.hha-login .hha-brand{position:absolute;top:44px;left:72px;display:flex;align-items:center;gap:12px;text-decoration:none;animation:hhaUp .8s cubic-bezier(.2,.7,.2,1) both}
.hha-login .hha-brand img{width:52px;height:52px;display:block}
.hha-login .hha-brand__text{display:flex;flex-direction:column}
.hha-login .hha-brand__text strong{font-size:17px;font-weight:800;letter-spacing:.06em;color:var(--hha-navy)}
.hha-login .hha-brand__text span{font-size:13px;color:#64748B}

/* Khung form */
.hha-login #login{width:100%;max-width:480px;margin:0;padding:0}
.hha-login #login h1.wp-login-logo{display:none}
.hha-login .hha-head{display:flex;flex-direction:column;gap:10px;margin:0 0 26px;animation:hhaUp .8s .1s cubic-bezier(.2,.7,.2,1) both}
.hha-login .hha-eyebrow{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--hha-blue)}
.hha-login .hha-title{margin:0;font-size:44px;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:var(--hha-navy)}
.hha-login .hha-sub{margin:0;font-size:16px;line-height:1.55;color:var(--hha-muted)}

.hha-login #loginform,.hha-login #lostpasswordform,.hha-login #resetpassform,.hha-login #registerform{
  margin:0;padding:0;background:none;border:0;box-shadow:none;overflow:visible;
  display:flex;flex-direction:column;gap:18px;animation:hhaUp .8s .22s cubic-bezier(.2,.7,.2,1) both;
}
.hha-login form.hha-shake{animation:hhaShake .5s}
.hha-login #login form p,.hha-login #login form .user-pass-wrap{margin:0}
.hha-login #login form label{display:block;font-size:14px;font-weight:600;color:var(--hha-navy);margin:0 0 8px;line-height:1.4}
.hha-login #login form .input,.hha-login #login form input[type=text],.hha-login #login form input[type=email],.hha-login #login form input[type=password]{
  width:100%;height:54px;box-sizing:border-box;margin:0;padding:0 18px;
  border:1.5px solid var(--hha-line);border-radius:14px;background:#fff;box-shadow:none;
  font:inherit;font-size:16px;color:var(--hha-ink);transition:border-color .2s,box-shadow .2s;
}
.hha-login #login form .input::placeholder{color:#94A3B8}
.hha-login #login form .input:focus{outline:none;border-color:var(--hha-navy);box-shadow:0 0 0 4px rgba(11,42,74,.1)}
.hha-login .wp-pwd{position:relative}
.hha-login .wp-pwd .input{padding-right:56px !important}
.hha-login .wp-pwd .wp-hide-pw{position:absolute;right:5px;top:5px;width:44px;height:44px;min-height:0;padding:0;margin:0;border:0;border-radius:10px;background:none;color:#64748B;box-shadow:none;display:flex;align-items:center;justify-content:center}
.hha-login .wp-pwd .wp-hide-pw:hover,.hha-login .wp-pwd .wp-hide-pw:focus{color:var(--hha-navy);background:#F1F5F9;box-shadow:none;outline:none}
.hha-login .wp-pwd .wp-hide-pw:focus-visible{outline:2px solid var(--hha-blue)}
.hha-login .wp-pwd .wp-hide-pw .dashicons{width:20px;height:20px;font-size:20px;top:0}

/* Ghi nhớ + Quên mật khẩu cùng một hàng */
.hha-login .hha-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.hha-login #login form .forgetmenot{float:none;display:flex;align-items:center;gap:10px;margin:0}
.hha-login #login form .forgetmenot label{margin:0;font-size:14px;font-weight:400;color:#334155;cursor:pointer}
.hha-login #rememberme{width:18px;height:18px;margin:0;border-radius:5px;border:1.5px solid #94A3B8;accent-color:var(--hha-navy)}
.hha-login #rememberme:checked{background:var(--hha-navy);border-color:var(--hha-navy)}
.hha-login #rememberme:checked::before{filter:brightness(0) invert(1)}
.hha-login .hha-row .wp-login-lost-password{font-size:14px;font-weight:600;text-decoration:none}

/* Nút đăng nhập */
.hha-login #login form p.submit{float:none;display:block;margin:0;padding:0}
.hha-login #login form .button-primary,.hha-login .hha-btn{
  float:none;width:100%;height:58px;min-height:58px;box-sizing:border-box;margin:0;
  border:0;border-radius:16px;background:var(--hha-navy);color:#fff;text-shadow:none;
  font:inherit;font-size:16px;font-weight:700;line-height:1;cursor:pointer;
  box-shadow:0 10px 24px rgba(11,42,74,.22);transition:background .2s,transform .2s,box-shadow .2s;
}
.hha-login .hha-btn{display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 24px}
.hha-login #login form .button-primary:hover,.hha-login .hha-btn:hover{background:var(--hha-navy-2);transform:translateY(-1px);box-shadow:0 14px 30px rgba(11,42,74,.3)}
.hha-login #login form .button-primary:focus,.hha-login .hha-btn:focus{outline:none;box-shadow:0 0 0 4px rgba(27,99,166,.3)}
.hha-login .hha-btn[disabled]{cursor:progress;transform:none}
.hha-login .hha-btn__ico{width:42px;height:42px;border-radius:12px;background:var(--hha-orange);display:flex;align-items:center;justify-content:center;transition:transform .2s,background .2s}
.hha-login .hha-btn:hover .hha-btn__ico{transform:translateX(3px)}
.hha-login .hha-btn__eq{display:none;gap:3px}
.hha-login .hha-btn__eq i{display:inline-block;width:4px;height:18px;border-radius:2px;animation:hhaEq .8s ease-in-out infinite}
.hha-login .hha-btn__eq i:nth-child(1){background:var(--hha-blue)}
.hha-login .hha-btn__eq i:nth-child(2){background:var(--hha-teal);animation-delay:.12s}
.hha-login .hha-btn__eq i:nth-child(3){background:var(--hha-gold);animation-delay:.24s}
.hha-login .hha-btn__eq i:nth-child(4){background:var(--hha-orange);animation-delay:.36s}
.hha-login.hha-loading .hha-btn__ico{background:rgba(255,255,255,.1)}
.hha-login.hha-loading .hha-btn__arrow{display:none}
.hha-login.hha-loading .hha-btn__eq{display:flex}

/* Thông báo lỗi / tin nhắn */
.hha-login #login_error,.hha-login .message,.hha-login .notice{
  margin:0 0 18px;padding:12px 16px;border-radius:12px;box-shadow:none;font-size:14px;line-height:1.5;
  border:1px solid #BFDBFE;border-left-width:1px;background:#EFF6FF;color:#1E3A8A;
}
.hha-login #login_error,.hha-login .notice-error{background:#FEF2F2;border-color:#FECACA;color:#B91C1C}
.hha-login #login_error p,.hha-login .message p{margin:0}
.hha-login #login_error a{color:#991B1B;font-weight:600}
.hha-login #login_error.hha-new{animation:hhaUp .35s ease-out both}

/* Liên kết dưới form */
.hha-login #nav{margin:20px 0 0;padding:0;font-size:14px;text-align:left}
.hha-login #nav:empty{display:none}
.hha-login #nav a{font-weight:600;text-decoration:none}
.hha-login #backtoblog,.hha-login .privacy-policy-page-link{display:none}
.hha-login .hha-help{position:absolute;left:72px;bottom:44px;margin:0;font-size:14px;color:#64748B;animation:hhaUp .8s .46s cubic-bezier(.2,.7,.2,1) both}
.hha-login .hha-help a{font-weight:600;text-decoration:none}

/* Panel dải màu bên phải */
.hha-login .hha-panel{position:fixed;top:24px;right:24px;bottom:24px;left:var(--hha-col);border-radius:32px;overflow:hidden;background:var(--hha-navy);color:#fff}
.hha-login .hha-arcs{position:absolute;inset:0;width:100%;height:100%}
.hha-login .hha-arc{stroke-dasharray:1500;animation:hhaDraw 1.8s cubic-bezier(.6,0,.2,1) both}
.hha-login .hha-a2{animation-delay:.15s}.hha-login .hha-a3{animation-delay:.3s}.hha-login .hha-a4{animation-delay:.45s}
.hha-login .hha-float{animation:hhaFloat 9s ease-in-out infinite}
.hha-login .hha-sun{animation:hhaSun 6s ease-in-out infinite;transform-origin:640px 150px;transform-box:view-box}
.hha-login.hha-loading .hha-arcs__all{animation:hhaPulse .8s ease-in-out infinite}
.hha-login .hha-panel__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,74,0) 40%,rgba(11,42,74,.92) 82%)}
.hha-login .hha-chip{position:absolute;left:56px;top:48px;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:13px;font-weight:700;letter-spacing:.1em}
.hha-login .hha-panel__copy{position:absolute;left:56px;right:56px;bottom:96px}
.hha-login .hha-panel__title{margin:0 0 16px;font-size:clamp(32px,3.1vw,44px);line-height:1.12;font-weight:800;letter-spacing:-.02em;color:#fff}
.hha-login .hha-panel__sub{margin:0;max-width:520px;font-size:17px;line-height:1.6;color:rgba(255,255,255,.8)}
.hha-login .hha-band{position:absolute;left:0;right:0;bottom:0;height:56px;background:var(--hha-orange);overflow:hidden;display:flex;align-items:center}
.hha-login .hha-marq{display:flex;gap:36px;white-space:nowrap;width:max-content;font-size:15px;font-weight:800;letter-spacing:.14em;color:#1A0E05;animation:hhaMarq 30s linear infinite}

/* Hiệu ứng quét màu khi đăng nhập thành công */
.hha-sweep{position:fixed;inset:0;z-index:100000;pointer-events:none;overflow:hidden}
.hha-sweep[hidden]{display:none}
.hha-s{position:absolute;inset:0;transform:translateX(105%)}
.hha-s1{background:#1B63A6;animation:hhaSweep .6s cubic-bezier(.7,0,.2,1) both}
.hha-s2{background:#2BB3B1;animation:hhaSweep .6s .08s cubic-bezier(.7,0,.2,1) both}
.hha-s3{background:#F4B93E;animation:hhaSweep .6s .16s cubic-bezier(.7,0,.2,1) both}
.hha-s4{background:#F97316;animation:hhaSweep .6s .24s cubic-bezier(.7,0,.2,1) both}
.hha-s5{background:#0B2A4A;animation:hhaSweep .7s .32s cubic-bezier(.7,0,.2,1) both;display:flex;color:#fff;font-family:'Be Vietnam Pro',system-ui,sans-serif}
.hha-dash__side{width:248px;box-sizing:border-box;padding:28px 20px;border-right:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:6px;animation:hhaFade .6s 1s both}
.hha-dash__brand{display:flex;align-items:center;gap:10px;padding:0 8px 24px}
.hha-dash__brand span{width:40px;height:40px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.hha-dash__brand img{width:32px;height:32px}
.hha-dash__brand strong{font-size:15px;font-weight:800;letter-spacing:.06em}
.hha-dash__item{padding:11px 12px;border-radius:10px;font-size:14px;color:rgba(255,255,255,.72)}
.hha-dash__item.is-active{background:rgba(249,115,22,.16);color:#FDBA74;font-weight:600}
.hha-dash__main{flex:1;box-sizing:border-box;padding:40px 48px;display:flex;flex-direction:column;gap:28px}
.hha-dash__hello{display:flex;flex-direction:column;gap:6px;animation:hhaFade .6s 1.15s both}
.hha-dash__hello span{font-size:14px;font-weight:600;color:#FDBA74}
.hha-dash__hello strong{font-size:34px;font-weight:800;letter-spacing:-.02em}
.hha-dash__row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;animation:hhaFade .6s 1.3s both}
.hha-dash__row3 i{height:128px}
.hha-dash__grid{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;animation:hhaFade .6s 1.45s both}
.hha-dash__big{grid-column:span 2}
.hha-dash__grid>div{display:flex;flex-direction:column;gap:20px}
.hha-dash__grid>div i{flex:1}
.hha-shim{display:block;border-radius:18px;background:linear-gradient(90deg,rgba(255,255,255,.05) 0,rgba(255,255,255,.13) 50%,rgba(255,255,255,.05) 100%);background-size:800px 100%;animation:hhaShim 1.4s linear infinite}
.hha-dash__note{font-size:14px;color:rgba(255,255,255,.7);animation:hhaFade .6s 1.45s both}

/* Màn hình nhỏ: ẩn panel, form chiếm toàn bộ */
@media (max-width:1024px){
  body.login.hha-login{width:auto;max-width:560px;margin:0 auto;padding:120px 32px 96px}
  .hha-login .hha-panel{display:none}
  .hha-login .hha-brand{left:32px}
  .hha-login .hha-help{left:32px;right:32px}
  .hha-dash__side{display:none}
}
@media (max-width:480px){
  body.login.hha-login{padding:112px 16px 96px}
  .hha-login .hha-brand{left:16px;top:28px}
  .hha-login .hha-help{left:16px;right:16px;bottom:28px}
  .hha-login .hha-title{font-size:36px}
  .hha-dash__main{padding:32px 20px}
  .hha-dash__row3{grid-template-columns:1fr}
  .hha-dash__row3 i{height:72px}
}

@media (prefers-reduced-motion: reduce){
  .hha-login *,.hha-sweep *{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important}
}