/* RED Z ACCOUNT: chỉ áp dụng cho trang login.php và register.php */
:root { color-scheme: dark; }
html { scroll-behavior: smooth; }
body.z-login-page, body.z-login-page * { box-sizing: border-box; }
body.z-login-page {
    margin: 0 !important;
    min-height: 100vh;
    background: #060609 !important;
    color: #f8fafc !important;
    font-family: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.z-login-page #loading { z-index: 9999; }
body.z-login-page .z-auth { color: #f6f6f9; }
body.z-login-page .z-auth * { box-sizing: border-box; }
body.z-login-page .z-auth a { color: inherit; text-decoration: none; }
body.z-login-page .z-auth h1, body.z-login-page .z-auth h2,
body.z-login-page .z-auth p { margin-top: 0; }
.z-auth {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 44px 28px 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 14% 14%, rgba(190, 16, 33, .17), transparent 35%),
      radial-gradient(ellipse at 88% 78%, rgba(164, 8, 26, .14), transparent 32%),
      #060609;
}
.z-ambient { position: absolute; z-index: -1; filter: blur(70px); pointer-events: none; border-radius: 50%; }
.z-ambient-one { left: -170px; top: 14%; width: 310px; height: 370px; background: rgba(226, 11, 40, .15); }
.z-ambient-two { right: -170px; bottom: 2%; width: 300px; height: 360px; background: rgba(236, 29, 51, .12); }
.z-shell {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.035fr) minmax(0, 1fr);
    width: min(1120px, 100%);
    min-height: 675px;
    border: 1px solid rgba(255, 255, 255, .105);
    border-radius: 26px;
    background: #101014;
    box-shadow: 0 38px 110px rgba(0, 0, 0, .64), 0 0 54px rgba(216, 11, 28, .055);
}
.z-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 675px;
    padding: 36px 42px 42px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 53% 35%, rgba(245, 19, 51, .25), transparent 44%),
        linear-gradient(156deg, #1b0b10 0%, #11090e 53%, #090a0e 100%);
    border-right: 1px solid rgba(255, 255, 255, .085);
}
.z-showcase:before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, transparent, #f51938 52%, transparent);
    box-shadow: 0 0 25px rgba(255, 18, 49, .75);
}
.z-showcase:after {
    content: ''; position: absolute; inset: auto -28% -50% -28%; height: 500px;
    border: 1px solid rgba(237, 32, 57, .14); border-radius: 50%;
    box-shadow: 0 0 0 74px rgba(255, 26, 54, .023), 0 0 0 158px rgba(255, 26, 54, .015);
    pointer-events: none; z-index: -1;
}
.z-showcase-grid {
    position: absolute; inset: 0; opacity: .18; z-index: -1; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 255, 255, .10) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 75%);
}
.z-showcase-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.z-brand-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 45px; height: 45px; border-radius: 13px;
    color: #ff3b50; font-size: 21px;
    background: linear-gradient(145deg, #2c1118, #140f15);
    border: 1px solid rgba(255, 44, 75, .4);
    box-shadow: inset 0 0 15px rgba(247, 28, 56, .1), 0 6px 20px rgba(0, 0, 0, .22);
}
.z-brand-meta { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.z-brand-meta strong { font: 800 18px/1.1 'Barlow Condensed', Impact, sans-serif; letter-spacing: 2px; }
.z-brand-meta small { font: 700 8px/1.6 'Be Vietnam Pro', sans-serif; letter-spacing: 1.45px; color: #8f8d98; }
.z-brand-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: #c1aab0; font-size: 9px; font-weight: 800; white-space: nowrap; letter-spacing: .5px; }
.z-brand-status span { height: 6px; width: 6px; border-radius: 50%; background: #ff3150; box-shadow: 0 0 10px #ff3150; }
.z-dragon-art {
    position: absolute; z-index: 0; pointer-events: none;
    top: 68px; left: 50%; transform: translateX(-50%);
    width: min(112%, 625px); max-width: none; height: 430px;
    object-fit: contain; object-position: center top;
    opacity: .87;
    mix-blend-mode: screen;
    mask-image: radial-gradient(ellipse at 49% 46%, black 28%, transparent 76%);
    -webkit-mask-image: radial-gradient(ellipse at 49% 46%, black 28%, transparent 76%);
    filter: saturate(1.1) contrast(1.16);
}
.z-showcase-bottom { z-index: 1; position: relative; margin-top: auto; }
.z-kicker { display: flex; align-items: center; gap: 10px; color: #ff4057; font-size: 9px; font-weight: 800; letter-spacing: 2.2px; margin-bottom: 14px; }
.z-kicker-line { width: 21px; height: 2px; background: #ff304c; box-shadow: 0 0 12px rgba(255, 48, 76, .8); }
.z-showcase-bottom h2 {
    font: 900 clamp(41px, 4.2vw, 61px)/.99 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
    letter-spacing: .2px; color: #fff; text-shadow: 0 7px 18px rgba(0, 0, 0, .42); margin: 0 0 18px !important;
}
.z-showcase-bottom h2 span { color: #fa304a; text-shadow: 0 0 25px rgba(255, 48, 76, .16); }
.z-showcase-bottom p { font-size: 12px; line-height: 1.95; max-width: 360px; color: #aaa6b0; margin-bottom: 24px; }
.z-feature-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.z-feature-chips span { padding: 9px 11px; border: 1px solid rgba(255,255,255,.105); border-radius: 8px; background: rgba(255,255,255,.034); color: #cecad0; font-size: 10px; font-weight: 700; }
.z-feature-chips i { color: #f93651; margin-right: 5px; }
.z-showcase-number { position: absolute; bottom: 22px; right: 24px; color: #a82c3d; opacity: .56; font: 900 18px/1 'Barlow Condensed', Impact, sans-serif; letter-spacing: 2px; }
.z-showcase-number span { color: #fff; }
.z-form-panel {
    display: flex; justify-content: center; align-items: center;
    min-width: 0; padding: 38px 46px 30px;
    background: linear-gradient(158deg, #151519, #0e0e13 78%);
}
.z-form-inner { width: 100%; max-width: 410px; }
.z-site-logo { text-align: left; margin-bottom: 33px; }
.z-site-logo img { display: block; width: min(100%, 390px); height: auto; max-height: 115px; object-fit: contain; object-position: left center; filter: drop-shadow(0 0 13px rgba(247, 21, 47, .12)); }
.z-section-label { color: #fb4057; font-size: 9px; letter-spacing: 2.2px; font-weight: 800; display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.z-section-label i { font-size: 13px; }
.z-form-inner h1 { color: #f9f7fa; font-size: clamp(27px, 2.5vw, 36px); font-weight: 800; line-height: 1.38; letter-spacing: -1.2px; margin: 0 0 9px !important; }
.z-form-inner h1 span { color: #f2f0f3; }
.z-dot { color: #fa2e4b !important; }
.z-form-lead { font-size: 11px; line-height: 1.85; font-weight: 500; color: #97939e; margin: 0 0 28px !important; }
.z-form-group { margin-bottom: 18px; min-width: 0; }
.z-form-group > label { display: flex; gap: 8px; align-items: center; margin: 0 0 9px; color: #e5e2e7; font-size: 11px; font-weight: 800; letter-spacing: .1px; }
.z-form-group > label i { color: #fa3d56; width: 13px; text-align: center; }
.z-input-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.z-input-wrap > .z-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 15px; color: #77727f; z-index: 1; }
.z-input-wrap input {
    width: 100%; height: 53px; min-width: 0; padding: 0 46px 0 45px; border-radius: 11px;
    outline: 0; border: 1px solid #353239; background: #19191f; color: #f8f7fa;
    font: 600 12px 'Be Vietnam Pro', Arial, sans-serif;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.z-input-wrap input::placeholder { color: #77717d; font-weight: 500; opacity: 1; }
.z-input-wrap input:hover { border-color: #59505a; background: #1e1d24; }
.z-input-wrap input:focus { border-color: #fa3351; background: #1f1a21; box-shadow: 0 0 0 3px rgba(244, 35, 65, .16), 0 0 20px rgba(244, 35, 65, .08); }
.z-input-wrap:focus-within > .z-input-icon { color: #ff3c57; }
.z-eye-toggle { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; color: #96919c; border: 0; background: transparent; border-radius: 8px; cursor: pointer; font-size: 13px; transition: color .2s, background .2s; }
.z-eye-toggle:hover, .z-eye-toggle:focus-visible { color: #ff425b; background: rgba(255, 255, 255, .07); outline: none; }
.z-captcha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.z-captcha-grid .z-form-group { margin-bottom: 12px; }
.z-captcha-grid .z-input-wrap input { padding: 0 12px; }
.z-captcha-grid .z-form-group > label { font-size: 10px; line-height: 1.5; min-height: 21px; }
.z-captcha-image { border: 1px solid #38333b; border-radius: 10px; background: #fff; min-height: 53px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.z-captcha-image img { display: block; max-width: 100%; max-height: 54px; object-fit: contain; }
.z-inline-status { font-size: 11px; font-weight: 600; color: #ff7183; }
.z-inline-status:not(:empty) { margin: 0 0 12px; padding: 10px 12px; background: rgba(249, 47, 78, .09); border: 1px solid rgba(249,47,78,.23); border-radius: 8px; }
.z-submit {
    display: flex; justify-content: center; align-items: center; gap: 10px; position: relative;
    width: 100%; min-height: 55px; padding: 13px 18px;
    border: 1px solid #ff6274; border-radius: 11px;
    color: white !important; cursor: pointer;
    font: 800 12px 'Be Vietnam Pro', Arial, sans-serif;
    background: linear-gradient(105deg, #d51432 0%, #fa2844 48%, #e21737 100%);
    box-shadow: 0 10px 28px rgba(235, 23, 54, .27), inset 0 1px 0 rgba(255,255,255,.16);
    transition: transform .2s, box-shadow .2s, filter .2s;
}
.z-submit .z-button-text { display: inline-flex; align-items: center; gap: 9px; }
.z-submit .z-button-arrow { position: absolute; right: 18px; transition: transform .2s; }
.z-submit:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); box-shadow: 0 12px 32px rgba(236, 27, 60, .42); }
.z-submit:hover:not(:disabled) .z-button-arrow { transform: translateX(3px); }
.z-submit:focus-visible { outline: 3px solid rgba(255, 95, 112, .45); outline-offset: 3px; }
.z-submit:disabled { cursor: wait; opacity: .8; }
.z-register-line { text-align: center; font-size: 11px; font-weight: 500; color: #aaa5af; margin: 18px 0 23px !important; }
.z-register-line a { font-weight: 800; color: #ff4c64 !important; margin-left: 4px; white-space: nowrap; }
.z-register-line a:hover { color: #ff8394 !important; }
.z-register-line a i { font-size: 9px; margin-left: 3px; }
.z-form-divider { display: flex; align-items: center; gap: 14px; margin: 23px 0 16px; font-size: 8px; letter-spacing: 2.2px; font-weight: 800; color: #696773; }
.z-form-divider:before, .z-form-divider:after { content:''; height: 1px; flex: 1; background: #2c2932; }
.z-footer-notes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; color: #76717b; font-size: 9px; font-weight: 700; }
.z-footer-notes i { color: #e93249; margin-right: 4px; }
.z-footer-bullet { color: #da3048; margin: 0 2px; }
.z-page-footer { width: 100%; margin-top: 17px; color: #68636e; font: 700 9px 'Be Vietnam Pro', Arial, sans-serif; letter-spacing: 1px; text-align: center; }
.z-page-footer span { color: #e52e47; margin: 0 4px; }
@media (max-width: 1090px) {
    .z-showcase { padding: 30px 28px 38px; }
    .z-showcase-bottom h2 { font-size: 48px; }
    .z-form-panel { padding: 30px 30px; }
    .z-brand-status { display: none; }
}
@media (max-width: 850px) {
    .z-auth { padding: 22px 16px 16px; }
    .z-shell { grid-template-columns: 1fr; max-width: 520px; min-height: 0; }
    .z-showcase { display: none; }
    .z-form-panel { padding: 33px 32px 30px; }
    .z-site-logo { margin-bottom: 24px; }
}
@media (max-width: 480px) {
    .z-auth { padding: 10px 10px 15px; min-height: 100dvh; }
    .z-shell { border-radius: 16px; }
    .z-form-panel { padding: 23px 20px 21px; }
    .z-site-logo img { max-height: 90px; }
    .z-section-label { font-size: 8px; }
    .z-form-inner h1 { font-size: 26px; }
    .z-form-lead { margin-bottom: 25px !important; }
    .z-captcha-grid { gap: 8px; }
    .z-captcha-grid .z-form-group > label { font-size: 9px; }
    .z-footer-notes { justify-content: center; text-align: center; }
    .z-page-footer { font-size: 8px; letter-spacing: .55px; }
}
@media (prefers-reduced-motion: reduce) {
    .z-auth *, .z-auth *:before, .z-auth *:after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Đăng ký: giữ bố cục gọn trên màn hình nhỏ, 4 trường nhập */
body.z-register-page .z-shell { min-height: 728px; }
body.z-register-page .z-showcase { min-height: 728px; }
body.z-register-page .z-form-panel { padding-top: 32px; padding-bottom: 27px; }
body.z-register-page .z-site-logo { margin-bottom: 22px; }
body.z-register-page .z-form-lead { margin-bottom: 22px !important; }
body.z-register-page .z-form-group { margin-bottom: 13px; }
body.z-register-page .z-input-wrap input { height: 48px; }
body.z-register-page .z-submit { min-height: 52px; margin-top: 5px; }
body.z-register-page .z-form-divider { margin-top: 18px; margin-bottom: 14px; }
body.z-register-page .z-register-line { margin-bottom: 17px !important; }
body.z-register-page .z-captcha-grid .z-form-group { margin-bottom: 12px; }
body.z-register-page .z-input-wrap input[type=email] { padding-right: 15px; }
@media (max-width: 850px) {
    body.z-register-page .z-shell { min-height: 0; }
    body.z-register-page .z-form-panel { padding: 30px 32px; }
}
@media (max-width: 480px) {
    body.z-register-page .z-form-panel { padding: 23px 20px; }
    body.z-register-page .z-form-group { margin-bottom: 11px; }
    body.z-register-page .z-site-logo { margin-bottom: 14px; }
    body.z-register-page .z-form-lead { margin-bottom: 19px !important; }
}