/* ==========================================================================
   VMS - trang đăng nhập giao diện Halloween (chỉ áp dụng khi container có class
   .o_vms_skin_halloween do template vti_theme.login_skin_halloween gắn vào).
   Mọi rule đều nằm dưới .o_vms_skin_halloween nên không ảnh hưởng trang khác.
   ========================================================================== */

.o_vms_skin_halloween {
    --o_bg1: #15102a; --o_bg2: #1d1636;
    --o_card: #1b1530; --o_card_border: #3a2f55; --o_right: #211a37;
    --o_input: #2a2142; --o_input_border: #3e3260;
    --o_text: #eee9fa; --o_muted: #b8aed6; --o_placeholder: #9d93bd;
    --o_orange: #f0a35a; --o_orange_dark: #b8642a; --o_orange_light: #e3a04f;
    --o_btn1: #e2762f; --o_btn2: #b8480f;
    --o_flame: #ffd45e; --o_silk: #d8d2ea;
    --o_font_body: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
    --o_font_head: "Lora", "Playfair Display", Georgia, "Times New Roman", serif;
    --o_hw_fx: 80vw; --o_hw_fy: 50vh; --o_hw_fa: 270; --o_hw_fr: 1200px;

    grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
    grid-template-rows: auto auto;
    column-gap: 0;
    row-gap: 0;
    justify-content: stretch;
    align-content: center;
    padding: 94px max(42px, calc((100% - 1000px) / 2)) 102px;
    background: linear-gradient(160deg, var(--o_bg1), var(--o_bg2));
    background-color: #15102a;
    color: var(--o_text);
    font-family: var(--o_font_body);
    font-size: 15px;
    line-height: 1.45;
}
.o_vms_skin_halloween code {
    background: #2f2650;
    color: #ffd9a8;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .92em;
}

/* ---------- ẩn phần mặc định (skin có nền + lời chào riêng) ---------- */
.o_vms_skin_halloween > .o_vms_sky,
.o_vms_skin_halloween > .o_vms_login_hero,
.o_vms_skin_halloween .o_vms_login_msg {
    display: none;
}

/* ---------- lớp nền toàn trang ---------- */
.o_vms_skin_halloween > .o_vms_hw_back {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    grid-column: auto;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.o_vms_skin_halloween .o_vms_hw_scatter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0; }
.o_vms_skin_halloween .o_vms_hw_scatter svg { position: absolute; opacity: .8; }
.o_vms_skin_halloween .o_vms_hw_ff { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #ffd98a; box-shadow: 0 0 8px 3px rgba(255, 200, 100, .55); animation: o_vms_hw_ff 6s ease-in-out infinite; }
@keyframes o_vms_hw_ff { 0%, 100% { transform: translate3d(0, 0, 0); opacity: .25; } 50% { transform: translate3d(14px, -18px, 0); opacity: 1; } }
.o_vms_skin_halloween > .o_vms_hw_fall { position: fixed; top: 0; right: 0; bottom: 0; left: 0; grid-column: auto; pointer-events: none; overflow: hidden; z-index: 1; }
.o_vms_skin_halloween .o_vms_hw_fall svg { position: absolute; top: 0; will-change: transform; animation: o_vms_hw_fall linear infinite; }
@keyframes o_vms_hw_fall { from { transform: translate3d(0, -12vh, 0) rotate(0deg); } to { transform: translate3d(var(--dx, 40px), 112vh, 0) rotate(400deg); } }

/* ---------- khung thẻ 2 nửa ---------- */
.o_vms_skin_halloween > .o_vms_hw_deco {
    grid-column: 1 / -1;
    grid-row: 1 / span 2;
    position: relative;
    z-index: auto;
    min-height: 540px;
    pointer-events: none;
}
.o_vms_skin_halloween .o_vms_hw_card {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 2;
    background: var(--o_right);
    border: 1px solid var(--o_card_border);
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .2);
}
.o_vms_skin_halloween .o_vms_hw_left { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 45%; overflow: hidden; border-radius: 14px 0 0 14px; background: #17122a; }
.o_vms_skin_halloween .o_vms_hw_left > svg.o_vms_hw_scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.o_vms_skin_halloween .o_vms_hw_right { position: absolute; top: 0; bottom: 0; right: 0; left: 45%; }
.o_vms_skin_halloween .o_vms_hw_lhi { position: absolute; top: 0; bottom: 0; left: 0; width: 45%; }
.o_vms_skin_halloween .o_vms_hw_bat { position: absolute; top: 21%; left: 0; width: 66px; z-index: 2; animation: o_vms_hw_fly 15s linear infinite; }
.o_vms_skin_halloween .o_vms_hw_bat svg { display: block; width: 100%; height: auto; overflow: visible; }
.o_vms_skin_halloween .o_vms_hw_wing { transform-box: fill-box; animation: o_vms_hw_flap .32s ease-in-out infinite alternate; }
.o_vms_skin_halloween .o_vms_hw_wing.l { transform-origin: 100% 50%; }
.o_vms_skin_halloween .o_vms_hw_wing.r { transform-origin: 0 50%; }
@keyframes o_vms_hw_flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes o_vms_hw_fly { 0% { transform: translate3d(-80px, 20px, 0); } 35% { transform: translate3d(190px, 0, 0); } 70% { transform: translate3d(330px, 30px, 0); } 100% { transform: translate3d(560px, -10px, 0); } }
.o_vms_skin_halloween .o_vms_hw_star { animation: o_vms_hw_tw 3s ease-in-out infinite; }
@keyframes o_vms_hw_tw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.o_vms_skin_halloween .o_vms_hw_moonglow { animation: o_vms_hw_flick 7s ease-in-out infinite; }

/* ---------- chữ bên trái: dòng chào + tiêu đề ---------- */
.o_vms_skin_halloween > .o_vms_hw_text {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: end;
    z-index: 3;
    padding: 70px 32px 36px;
    background: linear-gradient(transparent, rgba(16, 12, 30, .88) 55%);
    border-radius: 0 0 0 14px;
    pointer-events: none;
}
.o_vms_skin_halloween .o_vms_hw_tod { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #ffd9a8; margin: 0 0 8px; letter-spacing: .2px; }
.o_vms_skin_halloween .o_vms_hw_text h1 { font-family: var(--o_font_head); font-size: 27px; line-height: 1.2; margin: 0 0 8px; color: #fff; font-weight: 700; letter-spacing: 0; }
.o_vms_skin_halloween .o_vms_hw_text p { margin: 0; font-size: 13.5px; color: #d6cde9; max-width: 330px; }

/* ---------- khung viền + đồ trang trí ngoài thẻ ---------- */
.o_vms_skin_halloween .o_vms_hw_wrap { position: absolute; top: -18px; right: -18px; bottom: -18px; left: -18px; pointer-events: none; }
.o_vms_skin_halloween .o_vms_hw_frame { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid var(--o_orange_dark); border-radius: 10px; pointer-events: none; z-index: 4; }
.o_vms_skin_halloween .o_vms_hw_frame:before { content: ""; position: absolute; top: 6px; right: 6px; bottom: 6px; left: 6px; border: 1px solid var(--o_orange_light); border-radius: 6px; opacity: .7; }
.o_vms_skin_halloween .o_vms_hw_flr { position: absolute; width: 76px; height: 76px; color: var(--o_orange_light); }
.o_vms_skin_halloween .o_vms_hw_flr.tl { top: -2px; left: -2px; }
.o_vms_skin_halloween .o_vms_hw_flr.tr { top: -2px; right: -2px; transform: scaleX(-1); }
.o_vms_skin_halloween .o_vms_hw_flr.bl { bottom: -2px; left: -2px; transform: scaleY(-1); }
.o_vms_skin_halloween .o_vms_hw_flr.br { bottom: -2px; right: -2px; transform: scale(-1, -1); }
.o_vms_skin_halloween .o_vms_hw_leaf_on { position: absolute; }
.o_vms_skin_halloween .o_vms_hw_pk { position: absolute; z-index: 4; pointer-events: none; filter: drop-shadow(0 0 14px rgba(255, 150, 40, .45)); }
.o_vms_skin_halloween .o_vms_hw_pk svg { display: block; width: 100%; height: auto; overflow: visible; }
.o_vms_skin_halloween .o_vms_hw_pk.tl { width: 80px; top: -36px; left: -36px; transform: rotate(-8deg); }
.o_vms_skin_halloween .o_vms_hw_pk.tr { width: 80px; top: -36px; right: -36px; transform: rotate(8deg); }
.o_vms_skin_halloween .o_vms_hw_pk.br { width: 116px; bottom: -44px; right: -40px; transform: rotate(-4deg); }
.o_vms_skin_halloween .o_vms_hw_glowfx { animation: o_vms_hw_flick 2.6s ease-in-out infinite; }
.o_vms_skin_halloween .o_vms_hw_glowfx.d2 { animation-delay: -1.1s; }
.o_vms_skin_halloween .o_vms_hw_glowfx.d3 { animation-delay: -1.9s; }
@keyframes o_vms_hw_flick { 0%, 100% { opacity: 1; } 18% { opacity: .78; } 34% { opacity: .97; } 52% { opacity: .7; } 70% { opacity: 1; } 86% { opacity: .86; } }
.o_vms_skin_halloween .o_vms_hw_lan { position: absolute; width: 54px; z-index: 3; transform-origin: 50% 0; animation: o_vms_hw_swing 5.5s ease-in-out infinite; pointer-events: none; top: calc(50% - 86px); }
.o_vms_skin_halloween .o_vms_hw_lan.l { left: -62px; }
.o_vms_skin_halloween .o_vms_hw_lan.r { right: -62px; animation-delay: -2.6s; }
.o_vms_skin_halloween .o_vms_hw_arm { position: absolute; top: calc(50% - 88px); width: 36px; height: 4px; background: #8a7aa8; border-radius: 2px; z-index: 3; }
.o_vms_skin_halloween .o_vms_hw_arm.l { left: -36px; }
.o_vms_skin_halloween .o_vms_hw_arm.r { right: -36px; }
.o_vms_skin_halloween .o_vms_hw_lan .chain { width: 2px; height: 48px; margin: 0 auto; background: #8a7aa8; }
.o_vms_skin_halloween .o_vms_hw_lan svg { display: block; width: 54px; height: auto; overflow: visible; }
@keyframes o_vms_hw_swing { 0%, 100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
.o_vms_skin_halloween .o_vms_hw_idle { position: absolute; left: 90px; top: 100%; width: 52px; z-index: 4; pointer-events: none; transition: opacity .5s; animation: o_vms_hw_bob 3.2s ease-in-out infinite; }
.o_vms_skin_halloween .o_vms_hw_idle .thr { position: absolute; left: 50%; top: -2px; width: 1.5px; height: 40px; margin-left: -.75px; background: var(--o_silk); }
.o_vms_skin_halloween .o_vms_hw_idle svg { display: block; width: 52px; height: auto; margin-top: 36px; overflow: visible; }
@keyframes o_vms_hw_bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, 10px, 0); } }
.o_vms_skin_halloween.o_vms_hw_revealed .o_vms_hw_idle { opacity: 0; }
.o_vms_skin_halloween .o_vms_hw_legs.l { transform-box: fill-box; transform-origin: 100% 50%; animation: o_vms_hw_wig .35s ease-in-out infinite alternate; }
.o_vms_skin_halloween .o_vms_hw_legs.r { transform-box: fill-box; transform-origin: 0 50%; animation: o_vms_hw_wig .35s ease-in-out infinite alternate-reverse; }
@keyframes o_vms_hw_wig { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }

/* ---------- công tắc hiệu ứng ---------- */
.o_vms_skin_halloween .o_vms_hw_sw { position: absolute; left: 45%; top: 34px; transform: translateX(-50%); width: 30px; height: 62px; border-radius: 999px; border: 1px solid #5a4a82; background: #2a2142; cursor: pointer; padding: 0; z-index: 6; box-shadow: 0 0 12px rgba(0, 0, 0, .5); pointer-events: auto; }
.o_vms_skin_halloween .o_vms_hw_sw i { position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #3a2f60; color: #ffd9a8; display: flex; align-items: center; justify-content: center; transition: transform .3s; box-shadow: 0 0 8px rgba(255, 200, 120, .5); }
.o_vms_skin_halloween .o_vms_hw_sw[aria-checked="false"] i { transform: translate3d(0, 32px, 0); box-shadow: none; color: #9d93bd; }
.o_vms_skin_halloween .o_vms_hw_sw svg { width: 13px; height: 13px; }
.o_vms_skin_halloween .o_vms_hw_sw:focus-visible { outline: 2px solid var(--o_orange); outline-offset: 2px; }
.o_vms_skin_halloween > .o_vms_hw_toast { position: fixed; left: 50%; bottom: 28px; top: auto; right: auto; grid-column: auto; transform: translate3d(-50%, 20px, 0); background: #2a2142; border: 1px solid var(--o_orange); color: #fff; padding: 10px 18px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 50; font-size: 13.5px; max-width: 90vw; text-align: center; }
.o_vms_skin_halloween > .o_vms_hw_toast.on { opacity: 1; transform: translate3d(-50%, 0, 0); }

/* ---------- nửa phải: form ---------- */
.o_vms_skin_halloween form.oe_login_form {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    z-index: 3;
    padding: 30px 48px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--o_text);
}
.o_vms_skin_halloween .o_vms_login_card_head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0; margin: 0; min-height: 42px; }
.o_vms_skin_halloween .o_vms_login_card_head > div:not(.o_vms_lang) { display: contents; }
.o_vms_skin_halloween .o_vms_login_card_head img { grid-column: 1; grid-row: 1; width: auto; height: 36px; display: block; }
.o_vms_skin_halloween .o_vms_lang { grid-column: 3; grid-row: 1; margin: 0; align-self: center; padding: 0; border: 1px solid var(--o_input_border); border-radius: 999px; overflow: hidden; background: transparent; }
.o_vms_skin_halloween .o_vms_lang button { padding: 5px 11px; background: transparent; color: var(--o_muted); font: 600 12px var(--o_font_body); line-height: 1.4; }
.o_vms_skin_halloween .o_vms_lang button[aria-pressed="true"] { background: var(--o_orange_dark); color: #fff; box-shadow: none; }
.o_vms_skin_halloween .o_vms_lang button:focus-visible { outline: 2px solid var(--o_orange); outline-offset: 2px; }
.o_vms_skin_halloween .o_vms_login_card_head h2 { grid-column: 1 / -1; grid-row: 2; margin: 20px 0 4px; text-align: center; font-family: var(--o_font_head); font-weight: 700; font-size: 32px; line-height: 1.25; color: #fff; }
.o_vms_skin_halloween .o_vms_login_card_head p { grid-column: 1 / -1; grid-row: 3; margin: 0 0 20px; text-align: center; color: var(--o_muted); font-size: 13.5px; }
.o_vms_skin_halloween .oe_login_form .form-group { margin-bottom: 14px; }
.o_vms_skin_halloween .oe_login_form label { margin: 0 0 5px; color: var(--o_muted); font-size: 12.5px; font-weight: 600; }
.o_vms_skin_halloween .o_vms_field_ic { display: none; }
.o_vms_skin_halloween .oe_login_form .form-control { height: 44px; padding: 0 14px; background: var(--o_input); border: 1px solid var(--o_input_border); border-radius: 8px; color: var(--o_text); font: 400 14.5px var(--o_font_body); box-shadow: none; }
.o_vms_skin_halloween .oe_login_form .form-control::placeholder { color: var(--o_placeholder); opacity: 1; }
.o_vms_skin_halloween .oe_login_form .form-control:focus { background: var(--o_input); color: var(--o_text); border-color: var(--o_orange); box-shadow: 0 0 0 3px rgba(240, 163, 90, .35); }
.o_vms_skin_halloween .oe_login_form .field-password .form-control { padding-right: 54px; }
.o_vms_skin_halloween .o_vms_pw_toggle { right: 5px; bottom: 5px; width: 34px; height: 34px; border-radius: 6px; color: var(--o_muted); z-index: 3; }
.o_vms_skin_halloween .o_vms_pw_toggle:hover { background: transparent; color: #fff; }
.o_vms_skin_halloween .o_vms_pw_toggle:focus-visible { outline: 2px solid var(--o_orange); outline-offset: 2px; }
.o_vms_skin_halloween .o_vms_pw_toggle .o_vms_ic_off,
.o_vms_skin_halloween .o_vms_pw_toggle[aria-pressed="true"] .o_vms_ic_off { display: none; }
.o_vms_skin_halloween .o_vms_pw_toggle .o_vms_hw_fl { display: none; transform: rotate(calc((var(--o_hw_fa) - 270) * 1deg)); }
.o_vms_skin_halloween .o_vms_pw_toggle[aria-pressed="true"] .o_vms_ic_on { display: none; }
.o_vms_skin_halloween .o_vms_pw_toggle[aria-pressed="true"] .o_vms_hw_fl { display: block; }
.o_vms_skin_halloween .o_vms_hw_reveal .o_vms_pw_toggle { color: var(--o_flame); }
.o_vms_skin_halloween .o_vms_hw_reveal .form-control { border-color: #d9b055; box-shadow: 0 0 16px rgba(255, 208, 100, .35); }
.o_vms_skin_halloween .o_vms_hw_lit { display: none; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 42px; z-index: 2; pointer-events: none; overflow: hidden; border-radius: 7px; background: var(--o_input); padding: 0 54px 0 14px; align-items: center;
    font: 400 14.5px var(--o_font_body); color: #ffeab0; text-shadow: 0 0 8px rgba(255, 205, 110, .65);
    -webkit-mask-image: conic-gradient(from calc(var(--o_hw_fa) * 1deg - 14deg) at var(--o_hw_lx, 100%) var(--o_hw_ly, 50%), transparent 0deg, #000 4deg, #000 24deg, transparent 28deg, transparent 360deg);
    mask-image: conic-gradient(from calc(var(--o_hw_fa) * 1deg - 14deg) at var(--o_hw_lx, 100%) var(--o_hw_ly, 50%), transparent 0deg, #000 4deg, #000 24deg, transparent 28deg, transparent 360deg); }
.o_vms_skin_halloween .o_vms_hw_reveal .o_vms_hw_lit { display: flex; }
.o_vms_skin_halloween .o_vms_hw_reveal .o_vms_hw_lit.is_empty { display: none; }
.o_vms_skin_halloween .o_vms_hw_lit .clip { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; height: 100%; }
.o_vms_skin_halloween .o_vms_hw_lit .t { flex: none; white-space: pre; display: inline-flex; align-items: center; }
.o_vms_skin_halloween .o_vms_hw_lit .caret { display: none; width: 1.5px; height: 1.25em; background: #ffeab0; margin-left: 1px; animation: o_vms_hw_caret 1s steps(1) infinite; }
.o_vms_skin_halloween .o_vms_hw_lit .caret.on { display: inline-block; }
@keyframes o_vms_hw_caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.o_vms_skin_halloween .o_vms_hw_drop { position: absolute; left: 74%; bottom: 22px; width: 0; height: 0; z-index: 4; pointer-events: none; opacity: 0; transform: translate3d(0, -90px, 0); }
.o_vms_skin_halloween .o_vms_hw_drop .thr { position: absolute; left: -.75px; top: -64px; width: 1.5px; height: 64px; background: linear-gradient(transparent, var(--o_silk) 30%); }
.o_vms_skin_halloween .o_vms_hw_drop svg { position: absolute; left: -19px; top: -17px; width: 38px; height: auto; overflow: visible; }
.o_vms_skin_halloween .o_vms_hw_drop.is_down { animation: o_vms_hw_dropin 1.2s cubic-bezier(.3, .7, .4, 1) forwards; }
.o_vms_skin_halloween .o_vms_hw_drop.is_up { animation: o_vms_hw_climb .9s ease-in forwards; }
@keyframes o_vms_hw_dropin { 0% { opacity: 1; transform: translate3d(0, -90px, 0); } 55% { opacity: 1; transform: translate3d(0, 14px, 0); } 72% { transform: translate3d(0, -8px, 0); } 88% { transform: translate3d(0, 4px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes o_vms_hw_climb { 0% { opacity: 1; transform: translate3d(0, 0, 0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate3d(0, -90px, 0); } }
.o_vms_skin_halloween .o_vms_caps { margin: -8px 0 12px; font-size: 12.5px; color: #ffc27a; }
.o_vms_skin_halloween .oe_login_form .alert { margin: 0 0 12px; padding: 9px 12px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 600; }
.o_vms_skin_halloween .oe_login_form .alert-danger { background: rgba(226, 70, 60, .16); border-color: rgba(255, 130, 110, .5); color: #ffb4a8; }
.o_vms_skin_halloween .oe_login_form .alert-success { background: rgba(80, 190, 120, .16); border-color: rgba(120, 220, 150, .45); color: #a8f0c0; }
.o_vms_skin_halloween .oe_login_buttons { padding-top: 0 !important; }
.o_vms_skin_halloween .oe_login_buttons .btn-primary { height: 46px; border-radius: 8px; background: linear-gradient(180deg, var(--o_btn1), var(--o_btn2)); color: #fff; font: 700 15.5px var(--o_font_body); letter-spacing: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); box-shadow: 0 6px 22px rgba(242, 120, 40, .35); transition: transform .2s, box-shadow .2s; }
.o_vms_skin_halloween .oe_login_buttons .btn-primary:hover { background: linear-gradient(180deg, var(--o_btn1), var(--o_btn2)); transform: translate3d(0, -2px, 0); box-shadow: 0 10px 28px rgba(242, 120, 40, .5); }
.o_vms_skin_halloween .oe_login_buttons .btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(240, 163, 90, .55); }
.o_vms_skin_halloween .oe_login_buttons .small { justify-content: flex-end !important; margin-top: 0 !important; margin-bottom: 14px; font-size: 13px; order: -1; }
.o_vms_skin_halloween .oe_login_buttons { display: flex; flex-direction: column; }
.o_vms_skin_halloween .oe_login_buttons .small a { color: var(--o_orange); font-weight: 600; }
.o_vms_skin_halloween .oe_login_buttons .small a:hover { text-decoration: underline; }
.o_vms_skin_halloween .oe_login_buttons .small a:focus-visible { outline: 2px solid var(--o_orange); outline-offset: 2px; }

/* ---------- chân: dòng hỗ trợ + hướng dẫn thu gọn ---------- */
.o_vms_skin_halloween > .o_vms_login_help {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    z-index: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 48px 26px;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--o_muted);
    font-size: 13px;
    text-align: center;
}
.o_vms_skin_halloween .o_vms_login_contact { order: 1; display: block; margin: 0 0 8px; padding: 0; border: 0; }
.o_vms_skin_halloween .o_vms_login_contact > span { margin: 0; color: var(--o_muted); }
.o_vms_skin_halloween .o_vms_login_contact a { display: inline; padding: 0; border-radius: 0; background: transparent; color: var(--o_orange); font-size: 13px; font-weight: 600; }
.o_vms_skin_halloween .o_vms_login_contact a:hover { background: transparent; text-decoration: underline; }
.o_vms_skin_halloween .o_vms_login_contact a:focus-visible { outline: 2px solid var(--o_orange); outline-offset: 2px; }
.o_vms_skin_halloween .o_vms_login_contact .o_vms_ic { display: none; }
.o_vms_skin_halloween .o_vms_login_help h3 { order: 2; display: block; margin: 0; padding: 2px 4px; color: var(--o_muted); font: 500 12.5px var(--o_font_body); text-decoration: underline; cursor: pointer; }
.o_vms_skin_halloween .o_vms_login_help h3:hover { color: #fff; }
.o_vms_skin_halloween .o_vms_login_help h3:focus-visible { outline: 2px solid var(--o_orange); outline-offset: 2px; }
.o_vms_skin_halloween .o_vms_login_help h3 .o_vms_ic { display: none; }
.o_vms_skin_halloween .o_vms_login_help ul { order: 3; display: none; position: absolute; left: 48px; right: 48px; bottom: 56px; margin: 0; padding: 12px 16px 12px 18px; text-align: left; background: #2a2142; border: 1px solid var(--o_input_border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); z-index: 10; font-size: 12.8px; color: var(--o_text); list-style: disc; }
.o_vms_skin_halloween .o_vms_login_help.is_guide_open ul { display: block; }
.o_vms_skin_halloween .o_vms_login_help li { margin: 0; padding: 0; list-style: disc; }
.o_vms_skin_halloween .o_vms_login_help li + li { margin-top: 6px; }
.o_vms_skin_halloween .o_vms_login_help li::before { display: none; }
.o_vms_skin_halloween .o_vms_login_help code { background: #2f2650; color: #ffd9a8; font-size: .92em; padding: 1px 5px; border-radius: 4px; }

/* ---------- 8 biểu tượng ẩn + đèn pin ---------- */
.o_vms_skin_halloween > .o_vms_hw_gbeam { position: fixed; top: 0; right: 0; bottom: 0; left: 0; grid-column: auto; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .5s; mix-blend-mode: screen;
    background: conic-gradient(from calc(var(--o_hw_fa) * 1deg - 14deg) at var(--o_hw_fx) var(--o_hw_fy), rgba(255, 214, 130, 0) 0deg, rgba(255, 214, 130, .5) 4deg, rgba(255, 214, 130, .5) 24deg, rgba(255, 214, 130, 0) 28deg, rgba(255, 214, 130, 0) 360deg);
    -webkit-mask-image: radial-gradient(circle var(--o_hw_fr) at var(--o_hw_fx) var(--o_hw_fy), #000 0, #000 60%, transparent 100%);
    mask-image: radial-gradient(circle var(--o_hw_fr) at var(--o_hw_fx) var(--o_hw_fy), #000 0, #000 60%, transparent 100%); }
.o_vms_skin_halloween.o_vms_hw_revealed > .o_vms_hw_gbeam { opacity: 1; animation: o_vms_hw_flick 2.4s ease-in-out infinite; }
.o_vms_skin_halloween .o_vms_hw_hi { position: absolute; opacity: 0; pointer-events: none; z-index: 5; filter: drop-shadow(0 0 8px rgba(255, 190, 90, .85)); transition: opacity .12s; }
.o_vms_skin_halloween .o_vms_hw_hi svg { display: block; width: 100%; height: auto; overflow: visible; }
.o_vms_skin_halloween .o_vms_hw_hi.owl { width: 58px; left: 27%; top: -66px; }
.o_vms_skin_halloween .o_vms_hw_hi.cat { width: 54px; left: 36%; bottom: -1px; }
.o_vms_skin_halloween .o_vms_hw_hi.skull { width: 38px; left: 60%; top: 100%; margin-top: 8px; }
.o_vms_skin_halloween .o_vms_hw_hi.tomb { width: 36px; right: 150px; top: 100%; margin-top: 6px; }
.o_vms_skin_halloween .o_vms_hw_hi.ghost { width: 42px; left: 7%; top: 38%; }
.o_vms_skin_halloween .o_vms_hw_hi.bats { width: 76px; left: 9%; top: 0; }
.o_vms_skin_halloween .o_vms_hw_hi.cauldron { width: 54px; left: 14%; top: 55%; }
.o_vms_skin_halloween .o_vms_hw_hi.candy { width: 40px; left: 24px; bottom: 20px; }
.o_vms_skin_halloween .o_vms_hw_hi * { transform-box: fill-box; }
.o_vms_skin_halloween .o_vms_hw_hi:not(.is_lit) * { animation-play-state: paused !important; }
.o_vms_skin_halloween .owl .lid { transform-origin: 50% 0; transform: scaleY(1); }
.o_vms_skin_halloween .owl.is_found .lid { animation: o_vms_hw_open .6s ease-out forwards, o_vms_hw_blink 4s 1.4s infinite; }
.o_vms_skin_halloween .owl.is_found .tilt { transform-origin: 50% 100%; animation: o_vms_hw_tilt 2.6s ease-in-out infinite alternate; }
@keyframes o_vms_hw_open { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes o_vms_hw_blink { 0%, 90%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } }
@keyframes o_vms_hw_tilt { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.o_vms_skin_halloween .ghost .boo { opacity: 0; }
.o_vms_skin_halloween .ghost.is_found .gh { animation: o_vms_hw_float 2.2s ease-in-out infinite; }
.o_vms_skin_halloween .ghost.is_found .boo { animation: o_vms_hw_boo 2.2s ease-in-out infinite; }
@keyframes o_vms_hw_float { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); } 50% { transform: translate3d(0, -6px, 0) rotate(6deg); } }
@keyframes o_vms_hw_boo { 0%, 30% { opacity: 0; } 50%, 80% { opacity: 1; } 100% { opacity: 0; } }
.o_vms_skin_halloween .cat.is_found .tail { transform-origin: 0 100%; animation: o_vms_hw_swish 1.3s ease-in-out infinite alternate; }
.o_vms_skin_halloween .cat.is_found .eyes { animation: o_vms_hw_flick 2s ease-in-out infinite; }
@keyframes o_vms_hw_swish { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.o_vms_skin_halloween .skull.is_found .jaw { animation: o_vms_hw_chat .28s ease-in-out infinite alternate; }
@keyframes o_vms_hw_chat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 5px, 0); } }
.o_vms_skin_halloween .bats.is_found .b { transform-origin: 50% 0; animation: o_vms_hw_flutter .3s ease-in-out infinite alternate; }
.o_vms_skin_halloween .bats.is_found .b2 { animation-delay: -.12s; }
.o_vms_skin_halloween .bats.is_found .b3 { animation-delay: -.2s; }
@keyframes o_vms_hw_flutter { from { transform: scaleX(.7) rotate(-5deg); } to { transform: scaleX(1.1) rotate(5deg); } }
.o_vms_skin_halloween .cauldron.is_found .bub { animation: o_vms_hw_bubble 1.8s ease-in infinite; }
.o_vms_skin_halloween .cauldron.is_found .bub2 { animation-delay: -.6s; }
.o_vms_skin_halloween .cauldron.is_found .bub3 { animation-delay: -1.2s; }
@keyframes o_vms_hw_bubble { 0% { transform: translate3d(0, 0, 0); opacity: .9; } 100% { transform: translate3d(0, -18px, 0); opacity: 0; } }
.o_vms_skin_halloween .candy.is_found svg { animation: o_vms_hw_wobble 1s ease-in-out infinite alternate; }
@keyframes o_vms_hw_wobble { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.o_vms_skin_halloween .tomb.is_found svg { transform-origin: 50% 100%; animation: o_vms_hw_shake .5s ease-in-out infinite alternate; }
@keyframes o_vms_hw_shake { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }

/* ---------- tắt hiệu ứng ---------- */
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_deco *,
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_deco *:before,
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_back *,
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_fall *,
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_drop,
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_lit .caret { animation: none !important; }
.o_vms_skin_halloween.o_vms_hw_fx_off > .o_vms_hw_fall,
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_ff { display: none; }
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_drop.is_down { opacity: 1; transform: none; }
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_drop.is_up { opacity: 0; }
.o_vms_skin_halloween.o_vms_hw_fx_off .o_vms_hw_bat { transform: translate3d(190px, 0, 0); }
.o_vms_skin_halloween.o_vms_hw_fx_off .lid { opacity: 0; }
.o_vms_skin_halloween.o_vms_hw_fx_off .ghost .boo { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
    .o_vms_skin_halloween .o_vms_hw_deco *,
    .o_vms_skin_halloween .o_vms_hw_back * { animation: none !important; }
}

/* ---------- co giãn ---------- */
@media (max-width: 1099px) {
    .o_vms_skin_halloween { padding-left: max(66px, calc((100% - 1000px) / 2)); padding-right: max(66px, calc((100% - 1000px) / 2)); }
    .o_vms_skin_halloween .o_vms_hw_lan,
    .o_vms_skin_halloween .o_vms_hw_arm { display: none; }
}
@media (max-width: 1023px) {
    .o_vms_skin_halloween .o_vms_hw_pk { filter: drop-shadow(0 0 10px rgba(255, 150, 40, .4)); }
    .o_vms_skin_halloween .o_vms_hw_pk.tl, .o_vms_skin_halloween .o_vms_hw_pk.tr { width: 68px; top: -28px; }
    .o_vms_skin_halloween .o_vms_hw_pk.tl { left: -28px; }
    .o_vms_skin_halloween .o_vms_hw_pk.tr { right: -28px; }
    .o_vms_skin_halloween .o_vms_hw_pk.br { width: 96px; bottom: -38px; right: -34px; }
    .o_vms_skin_halloween form.oe_login_form { padding: 28px 34px 0; }
    .o_vms_skin_halloween > .o_vms_login_help { padding-left: 34px; padding-right: 34px; }
    .o_vms_skin_halloween .o_vms_login_help ul { left: 34px; right: 34px; }
    .o_vms_skin_halloween > .o_vms_hw_text { padding: 60px 22px 30px; }
    .o_vms_skin_halloween .o_vms_hw_text h1 { font-size: 23px; }
}
@media (max-width: 767px) {
    .o_vms_skin_halloween { grid-template-columns: minmax(0, 1fr); grid-template-rows: 160px auto auto; align-content: start; min-height: 0; padding: 84px 28px 92px; }
    .o_vms_skin_halloween > .o_vms_hw_deco { grid-column: 1; grid-row: 1 / span 3; min-height: 0; }
    .o_vms_skin_halloween .o_vms_hw_left { right: 0; bottom: auto; width: auto; height: 160px; border-radius: 14px 14px 0 0; }
    .o_vms_skin_halloween .o_vms_hw_right { left: 0; }
    .o_vms_skin_halloween .o_vms_hw_lhi { right: 0; bottom: auto; width: auto; height: 160px; }
    .o_vms_skin_halloween > .o_vms_hw_text { grid-column: 1; grid-row: 1; padding: 40px 18px 14px; border-radius: 0; }
    .o_vms_skin_halloween .o_vms_hw_text h1 { font-size: 21px; margin: 0; }
    .o_vms_skin_halloween .o_vms_hw_text p, .o_vms_skin_halloween .o_vms_hw_tod, .o_vms_skin_halloween .o_vms_hw_witch { display: none; }
    .o_vms_skin_halloween form.oe_login_form { grid-column: 1; grid-row: 2; padding: 22px 20px 0; align-self: start; }
    .o_vms_skin_halloween > .o_vms_login_help { grid-column: 1; grid-row: 3; padding: 20px 20px 20px; }
    .o_vms_skin_halloween .o_vms_login_help ul { left: 20px; right: 20px; }
    .o_vms_skin_halloween .o_vms_login_card_head h2 { font-size: 27px; margin-top: 14px; }
    .o_vms_skin_halloween .o_vms_hw_sw { left: auto; right: 12px; top: 12px; transform: none; width: 26px; height: 54px; }
    .o_vms_skin_halloween .o_vms_hw_sw i { width: 18px; height: 18px; }
    .o_vms_skin_halloween .o_vms_hw_sw[aria-checked="false"] i { transform: translate3d(0, 28px, 0); }
    .o_vms_skin_halloween .o_vms_hw_moon { transform: translate(125px, -60px); }
    .o_vms_skin_halloween .o_vms_hw_bat { width: 46px; top: 12%; }
    .o_vms_skin_halloween .o_vms_hw_flr { width: 54px; height: 54px; }
    .o_vms_skin_halloween .o_vms_hw_pk.tl, .o_vms_skin_halloween .o_vms_hw_pk.tr { width: 50px; top: -20px; }
    .o_vms_skin_halloween .o_vms_hw_pk.tl { left: -8px; }
    .o_vms_skin_halloween .o_vms_hw_pk.tr { right: -8px; }
    .o_vms_skin_halloween .o_vms_hw_pk.br { width: 66px; bottom: -22px; right: -8px; }
    .o_vms_skin_halloween .o_vms_hw_idle { left: 40px; width: 40px; }
    .o_vms_skin_halloween .o_vms_hw_idle svg { width: 40px; margin-top: 26px; }
    .o_vms_skin_halloween .o_vms_hw_idle .thr { height: 30px; }
    .o_vms_skin_halloween .o_vms_hw_scatter svg:nth-child(n+8), .o_vms_skin_halloween .o_vms_hw_ff:nth-child(n+8) { display: none; }
    .o_vms_skin_halloween .o_vms_hw_hi.ghost, .o_vms_skin_halloween .o_vms_hw_hi.cauldron { display: none; }
    .o_vms_skin_halloween .o_vms_hw_hi.owl { width: 40px; top: -46px; }
    .o_vms_skin_halloween .o_vms_hw_hi.cat { width: 42px; left: 30%; }
    .o_vms_skin_halloween .o_vms_hw_hi.skull { left: 55%; width: 32px; }
    .o_vms_skin_halloween .o_vms_hw_hi.tomb { right: 84px; width: 30px; }
    .o_vms_skin_halloween .o_vms_hw_hi.bats { width: 56px; left: 4%; }
    .o_vms_skin_halloween .o_vms_hw_hi.candy { width: 34px; left: 16px; bottom: 14px; }
}