/* Đăng nhập / đăng ký (popup + /dang-nhap), menu người dùng, lịch sử xem. Số đo theo popup motchille.film. */
.au-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center}
.au-modal[hidden]{display:none}
.au-overlay{position:absolute;inset:0;background:rgba(0,0,0,.7)}
.au-dialog{position:relative;width:92vw;max-width:560px;max-height:85vh;overflow-y:auto}
.au-card{position:relative;border-radius:16px;background:#0b0f14;color:#fff;border:1px solid rgba(255,255,255,.1);box-shadow:0 0 0 1px rgba(255,126,8,.2),0 30px 120px rgba(0,0,0,.85);padding:28px 32px 24px}
.au-close{position:absolute;right:16px;top:16px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9999px;color:rgba(255,255,255,.6);transition:background .15s,color .15s}
.au-close:hover{background:rgba(255,255,255,.1);color:#fff}
.au-head{margin-bottom:20px;text-align:center}
.au-title{font-size:24px;line-height:32px;font-weight:600;letter-spacing:.025em}
.au-sub{margin-top:4px;font-size:14px;line-height:20px;color:rgba(255,255,255,.45)}
.au-form{display:flex;flex-direction:column;gap:16px;margin-top:44px}
.au-form[hidden]{display:none}
.au-input{height:48px;width:100%;padding:0 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:16px;line-height:24px;outline:none;transition:border-color .15s,box-shadow .15s}
.au-input::placeholder{color:rgba(255,255,255,.35)}
.au-input:focus{border-color:rgba(255,126,8,.7);box-shadow:0 0 0 4px rgba(255,126,8,.15)}
.au-btn{height:48px;border-radius:14px;background:#ff7e08;color:#000;font-size:16px;line-height:24px;font-weight:600;transition:background .15s,opacity .15s}
.au-btn:hover{background:rgba(255,126,8,.9)}
.au-btn:disabled{opacity:.5;pointer-events:none}
.au-err{padding:8px 12px;border-radius:10px;border:1px solid rgba(251,44,54,.3);background:rgba(251,44,54,.1);color:#ff6467;font-size:13px;line-height:18px;text-align:center}
.au-err[hidden]{display:none}
.au-switch{text-align:center;font-size:14px;line-height:20px;color:rgba(255,255,255,.45)}
.au-switch a{color:#ff7e08;font-weight:500}
.au-switch a:hover{text-decoration:underline}
.au-page{max-width:560px;margin:0 auto}

/* menu người dùng (header) */
.mc-user__name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mc-dd__panel.mc-user__panel{left:auto;right:0;width:200px;flex-direction:column;flex-wrap:nowrap;gap:4px;padding:8px}
.mc-user__panel a,.mc-user__panel button{display:block;width:100%;padding:8px 12px;border-radius:6px;text-align:left;font-size:14px;line-height:20px;color:#fff}
.mc-user__panel a:hover,.mc-user__panel button:hover{background:rgba(255,255,255,.05);color:var(--mc-accent)}
.mc-user__sep{display:block;height:1px;margin:4px 8px;background:var(--mc-line)}
.mc-user .mc-login{gap:8px}
.mc-mmenu form{margin:0}
.mc-mmenu__me{gap:10px;justify-content:flex-start !important;padding-bottom:12px !important;margin-bottom:4px;border-bottom:1px solid var(--mc-line)}

/* avatar preset (gradient + chữ cái đầu) — dùng ở header, trang tài khoản, nav */
.ac-ava{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:9999px;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);line-height:1}

/* khu tài khoản: ≥1024 sidebar 260px + nội dung, <1024 hàng pill cuộn ngang */
.ac{display:flex;flex-direction:column;gap:20px}
.ac-side{min-width:0}
.ac-main{min-width:0;display:flex;flex-direction:column;gap:20px}
@media (min-width:1024px){
  .ac{flex-direction:row;align-items:flex-start;gap:24px}
  .ac-side{width:260px;flex:none;position:sticky;top:72px}
  .ac-main{flex:1}
}

/* nav tài khoản */
.ac-nav{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ac-nav::-webkit-scrollbar{display:none}
.ac-nav__it{display:flex;align-items:center;gap:8px;white-space:nowrap;height:40px;padding:0 14px;border-radius:9999px;background:rgba(255,255,255,.05);border:1px solid var(--mc-line);color:var(--mc-gray-300);font-size:14px;line-height:20px;font-weight:500;transition:background .15s,color .15s,border-color .15s}
.ac-nav__it:hover{color:#fff;background:rgba(255,255,255,.1)}
.ac-nav__it.is-active{background:rgba(255,126,8,.14);border-color:rgba(255,126,8,.5);color:var(--mc-accent)}
.ac-nav__sep{display:none}
.ac-nav__out{margin:0;flex:none}
@media (min-width:1024px){
  .ac-nav{flex-direction:column;gap:4px;overflow:visible;border-radius:16px;background:#0b0f14;border:1px solid var(--mc-line);padding:12px}
  .ac-nav__it{height:44px;border-radius:12px;background:none;border:1px solid transparent;width:100%}
  .ac-nav__sep{display:block;height:1px;margin:8px 4px;background:var(--mc-line)}
  .ac-nav__out .ac-nav__it{color:#ff6467}
  .ac-nav__out .ac-nav__it:hover{background:rgba(251,44,54,.1);color:#ff6467}
}

/* thẻ nội dung */
.ac-card{border-radius:16px;background:#0b0f14;border:1px solid var(--mc-line);padding:20px}
.ac-card.is-focus{border-color:rgba(255,126,8,.35)}
@media (min-width:768px){.ac-card{padding:24px 28px}}
.ac-card__head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.ac-card__who{min-width:0}
.ac-h2{font-size:18px;line-height:26px;font-weight:600}
.ac-note{font-size:13px;line-height:18px;color:var(--mc-gray-400);overflow-wrap:anywhere}
.ac-form{display:flex;flex-direction:column;gap:16px}
.ac-field{display:flex;flex-direction:column;gap:6px}
.ac-lab{font-size:14px;line-height:20px;font-weight:500;color:var(--mc-gray-300)}
.ac-form .au-input:disabled{color:var(--mc-gray-400);cursor:not-allowed}
.ac-form .au-input.is-err{border-color:rgba(251,44,54,.6)}
.ac-btn{align-self:flex-start;min-width:180px;padding:0 24px}
.ac-ok{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,220,90,.3);background:rgba(0,220,90,.1);color:#00dc5a;font-size:14px;line-height:20px}
.ac-ok svg{flex:none}
.ac-err{padding:10px 12px;border-radius:12px;border:1px solid rgba(251,44,54,.3);background:rgba(251,44,54,.1);color:#ff6467;font-size:13px;line-height:18px}

/* chọn avatar preset */
.ac-avas{display:flex;flex-wrap:wrap;gap:10px}
.ac-avas__it{position:relative;display:inline-flex;padding:3px;border-radius:9999px;border:2px solid transparent;cursor:pointer;transition:border-color .15s,transform .15s}
.ac-avas__it:hover{transform:scale(1.06)}
.ac-avas__it input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ac-avas__it.is-active{border-color:var(--mc-accent)}
.ac-avas__it input:focus-visible+.ac-ava{box-shadow:0 0 0 3px rgba(255,126,8,.45)}

/* lịch sử xem */
.hs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hs-clear{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:9999px;border:1px solid rgba(251,44,54,.35);background:rgba(251,44,54,.08);color:#ff6467;font-size:13px;line-height:18px;font-weight:500;transition:background .15s}
.hs-clear:hover{background:rgba(251,44,54,.18)}
.hs-card.is-gone{opacity:0;transform:scale(.96);transition:opacity .2s,transform .2s}
.hs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:768px){.hs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.hs-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1280px){.hs-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.hs-card__img{position:relative;display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--mc-gray-800)}
.hs-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--mc-ease)}
.hs-card__img:hover img{transform:scale(1.05)}
.hs-card__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.2)}
.hs-card__bar span{display:block;height:100%;background:var(--mc-accent)}
.hs-card__time{position:absolute;right:6px;bottom:10px;padding:2px 6px;border-radius:4px;background:rgba(0,0,0,.75);font-size:12px;line-height:16px;font-variant-numeric:tabular-nums}
.hs-card__meta{margin-top:8px}
.hs-card__name{font-size:14px;line-height:20px;font-weight:500}
.hs-card__name:hover{color:var(--mc-accent)}
.hs-card__sub{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;color:var(--mc-gray-400)}
.hs-card__del{flex:none;padding:4px;border-radius:4px;color:var(--mc-gray-400)}
.hs-card__del:hover{color:#ff6467;background:rgba(255,255,255,.05)}
.hs-empty{text-align:center;color:var(--mc-gray-400)}
.hs-empty a{color:var(--mc-accent)}
.pg .mc-pager{margin-top:32px}