/* End User Styling - Lễ Hội Bia Hà Nội (Habeco) */
@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/fonts/SVN-Gilroy-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/fonts/SVN-Gilroy-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/fonts/SVN-Gilroy-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/fonts/SVN-Gilroy-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/fonts/SVN-Gilroy-Heavy.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SVN-Gilroy';
    src: url('/fonts/SVN-Gilroy-Black.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --theme-gold: #d4a843;
    --theme-gold-glow: rgba(212, 168, 67, 0.35);
    --theme-dark-bg: #0b0f19;
    --theme-card-bg: rgba(18, 24, 38, 0.92);
    --theme-card-border: rgba(212, 168, 67, 0.25);
    --theme-text-light: #f8fafc;
    --theme-text-muted: #94a3b8;
    --theme-red: #E81E25;
}

body.eu-body {
    font-family: 'SVN-Gilroy', 'Gilroy', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--theme-dark-bg);
    color: var(--theme-text-light);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow-x: hidden;
}

/* Background overlay with subtle grain and festive beer tones */
.eu-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0b0f19;
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(11, 15, 25, 0.05) 30%, rgba(11, 15, 25, 0.35) 70%, rgba(11, 15, 25, 0.75) 100%),
        url('/images/background.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: -1;
    transition: background-image 0.4s ease;
}

.eu-container {
    width: 100%;
    max-width: 520px;
    padding: 24px 16px;
    margin: auto;
}

.eu-container.eu-container-wide {
    max-width: 860px;
}

.eu-container.eu-container-status {
    max-width: 840px;
}

/* Card Container - Light Frosted Glass (Nền trong suốt trắng mờ nhẹ, trong hơn nhìn rõ phía sau) */
.eu-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    border-radius: 22px;
    padding: 30px 26px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: fadeInCard 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
}

@keyframes fadeInCard {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Center aligned cards for status pages (ComingSoon, Closed & Overload) */
.eu-comingsoon .eu-card,
.eu-closed .eu-card,
.eu-overload .eu-card,
.eu-closed-card {
    background-color: rgba(255, 248, 212, 0.8) !important;
    background: rgba(255, 248, 212, 0.8) !important;
    border: 1.5px solid rgba(212, 168, 67, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px !important;
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 168, 67, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #E81E25 !important;
    text-align: center !important;
    position: relative !important;
    top: 20px !important;
    max-width: 760px !important;
    width: 100% !important;
    padding: 34px 48px 30px 48px !important;
    margin: 0 auto !important;
}

.eu-closed-title {
    font-family: 'SVN-Gilroy', 'Gilroy', sans-serif !important;
    color: #E81E25 !important;
    font-size: 2.05rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
    text-shadow: none !important;
}

.eu-closed-desc,
.eu-closed .eu-description,
.eu-closed p {
    font-family: 'SVN-Gilroy', 'Gilroy', sans-serif !important;
    color: #E81E25 !important;
    font-size: 1.08rem !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    margin-bottom: 0 !important;
    text-shadow: none !important;
    text-wrap: balance !important;
    text-wrap: pretty !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

.eu-closed-main-text {
    font-size: 1.12rem !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    margin-bottom: 14px !important;
    text-wrap: balance !important;
    text-wrap: pretty !important;
}

.eu-closed-main-text strong {
    font-weight: 800 !important;
}

.eu-closed-sub-text {
    font-size: 1.0rem !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    margin-bottom: 0 !important;
    text-wrap: balance !important;
    text-wrap: pretty !important;
    opacity: 0.95;
}

.eu-closed strong {
    color: #E81E25 !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    .eu-closed {
        min-height: auto;
        padding-top: 0;
    }

    .eu-closed .eu-card,
    .eu-closed-card {
        padding: 24px 20px !important;
        border-radius: 18px !important;
        margin: 0 auto !important;
        position: relative !important;
        top: 15px !important;
        max-width: 100% !important;
    }

    .eu-closed-title {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }

    .eu-closed-desc,
    .eu-closed .eu-description,
    .eu-closed p {
        font-size: 0.96rem !important;
        line-height: 1.6 !important;
    }
}

/* Tối ưu riêng màn thông báo Thành Công - Màu Kem & Chữ Đỏ Habeco */
.eu-success {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.eu-success .eu-card {
    background-color: rgba(255, 248, 212, 0.8) !important;
    background: rgba(255, 248, 212, 0.8) !important;
    border: 1.5px solid #d4a843 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35), 0 0 25px rgba(212, 168, 67, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #E81E25 !important;
    text-align: center;
    max-width: 460px !important;
    padding: 22px 20px !important;
    margin: 10px auto !important;
}

.eu-success .eu-subtitle,
.eu-success h2 {
    color: #E81E25 !important;
    text-shadow: none !important;
    font-weight: 800 !important;
}

.eu-success .text-white,
.eu-success .text-light {
    color: #E81E25 !important;
    text-shadow: none !important;
}

.eu-success p {
    color: #E81E25;
}

.eu-success strong {
    color: #E81E25 !important;
}

/* Nhóm nút hành động cân đối chuẩn 50-50 tuyệt đối trên màn hình thành công */
.eu-success-btn-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
    align-items: stretch !important;
}

.eu-success-btn-group {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 16px !important;
    align-items: stretch !important;
}

.eu-btn-success-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 42px !important;
    line-height: 42px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
}

.eu-btn-success-primary {
    background: linear-gradient(135deg, #c91f24 0%, #a41015 50%, #7d090d 100%) !important;
    border: 1.5px solid #ffd700 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(164, 16, 21, 0.35) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

.eu-btn-success-primary:hover {
    background: linear-gradient(135deg, #d32f2f 0%, #b71c1c 50%, #8b0000 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(164, 16, 21, 0.45) !important;
}

.eu-btn-success-secondary {
    background: #ffffff !important;
    border: 1.5px solid #E81E25 !important;
    color: #E81E25 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.eu-btn-success-secondary:hover {
    background: #fff5f5 !important;
    border-color: #b71c1c !important;
    color: #a41015 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(204, 40, 46, 0.15) !important;
}

@media (max-width: 480px) {

    .eu-success-btn-grid,
    .eu-success-btn-group {
        gap: 8px !important;
    }

    .eu-btn-success-action {
        font-size: 0.80rem !important;
        padding: 0 4px !important;
        height: 38px !important;
        line-height: 38px !important;
    }
}

@media (max-width: 768px) {
    .eu-success .eu-card {
        padding: 18px 16px !important;
        margin-top: 30px !important;
        margin-bottom: 20px !important;
        border-radius: 18px !important;
    }
}

.eu-comingsoon .eu-subtitle {
    color: #ffffff !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9) !important;
    letter-spacing: 0.5px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.eu-comingsoon .eu-description {
    color: #ffffff !important;
    font-size: 0.96rem !important;
    line-height: 1.65;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9) !important;
}

.eu-comingsoon .eu-status-icon i {
    color: #ffd700 !important;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8)) !important;
}

/* Logo & Header */
.eu-logo {
    text-align: center;
    margin-bottom: 12px;
}

.eu-logo i {
    font-size: 2.8rem;
    color: var(--theme-color, var(--theme-gold));
    filter: drop-shadow(0 0 12px var(--theme-gold-glow));
    animation: pulseLogo 3s infinite ease-in-out;
}

@keyframes pulseLogo {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

.eu-title {
    font-size: 1.45rem;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    margin: 0 0 8px;
    letter-spacing: -0.2px;
}

.eu-subtitle {
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    color: var(--theme-color, var(--theme-gold));
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.eu-description {
    text-align: center;
    font-size: 0.95rem;
    color: var(--theme-text-muted);
    line-height: 1.6;
    margin-bottom: 24px;
}

.eu-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--theme-color, var(--theme-gold)), transparent);
    margin: 16px auto 24px;
    width: 60%;
}

/* Status Icons */
.eu-status-icon {
    margin: 16px auto 20px;
    color: var(--theme-color, var(--theme-gold));
    filter: drop-shadow(0 0 10px var(--theme-gold-glow));
}

.eu-status-icon.success {
    color: #10b981;
    filter: drop-shadow(0 0 10px rgba(16, 185, 129, 0.4));
}

.eu-status-icon.closed {
    color: #94a3b8;
    filter: none;
}

/* Form Controls */
.eu-card .form-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 6px;
}

.eu-card .form-control,
.eu-card .form-select {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border-radius: 10px;
    padding: 11px 14px;
    font-size: 0.92rem;
    transition: all 0.25s ease;
}

.eu-card .form-select option {
    background-color: #121826;
    color: #ffffff;
}

.eu-card .form-control:focus,
.eu-card .form-select:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--theme-color, var(--theme-gold));
    box-shadow: 0 0 0 3px var(--theme-gold-glow);
    color: #ffffff;
}

.eu-card .form-control::placeholder {
    color: #64748b;
}

/* Age verification highlight box */
.age-check {
    background: rgba(212, 168, 67, 0.08);
    border: 1px solid rgba(212, 168, 67, 0.3);
    border-radius: 10px;
    padding: 12px 14px 12px 38px;
}

.age-check .form-check-input {
    margin-left: -26px;
    cursor: pointer;
}

.age-check .form-check-input:checked {
    background-color: var(--theme-color, var(--theme-gold));
    border-color: var(--theme-color, var(--theme-gold));
}

/* Gender Group */
.gender-group {
    display: flex;
    gap: 16px;
    background: rgba(255, 255, 255, 0.04);
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gender-group .form-check-label {
    cursor: pointer;
    font-size: 0.88rem;
}

/* Ticket type radio options */
.ticket-type-group {
    display: flex;
    gap: 12px;
}

.ticket-type-group .form-check {
    flex: 1;
    padding: 0;
}

.ticket-type-group .form-check-input {
    display: none;
}

.ticket-option {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ticket-type-group .form-check-input:checked+.ticket-option {
    background: rgba(212, 168, 67, 0.2);
    border-color: var(--theme-color, var(--theme-gold));
    color: var(--theme-color, var(--theme-gold));
    box-shadow: 0 0 12px var(--theme-gold-glow);
}

/* Captcha Group */
.captcha-group,
.captcha-row,
.form-group-v .captcha-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
}

.captcha-img,
.form-group-v .captcha-img {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    padding: 2px 4px !important;
    border: 1.5px solid #d4a843 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    object-fit: contain !important;
    display: block !important;
}

.captcha-refresh,
.form-group-v .captcha-refresh {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    color: #E81E25 !important;
    border: 1.5px solid #d4a843 !important;
    background: #ffffff !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.captcha-refresh:hover:not(:disabled) {
    background: #E81E25 !important;
    border-color: #E81E25 !important;
    color: #ffffff !important;
    transform: rotate(45deg);
}

.captcha-row input,
.captcha-row .form-control,
.form-group-v .captcha-row input {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 38px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    border: 1.5px solid #d4a843 !important;
    color: #E81E25 !important;
}

.captcha-row input:focus,
.form-group-v .captcha-row input:focus {
    border-color: #E81E25 !important;
    box-shadow: 0 0 0 2px rgba(204, 40, 46, 0.25) !important;
}

/* Submit Buttons - Bia Hà Nội Festive Crimson & Gold (Inspired by KV mobile-btn.png) */
.btn-register,
.btn-eu-submit,
.btn-v-submit {
    background: linear-gradient(135deg, #c91f24 0%, #a41015 50%, #7d090d 100%);
    border: 2px solid #ffd700;
    color: #fff8e7;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 13px 26px;
    border-radius: 50px;
    box-shadow: 0 5px 18px rgba(164, 16, 21, 0.45), 0 0 16px rgba(255, 215, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.btn-register::after,
.btn-eu-submit::after,
.btn-v-submit::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: rotate(25deg);
    transition: none;
    pointer-events: none;
}

.btn-register:hover::after,
.btn-eu-submit:hover::after,
.btn-v-submit:hover::after {
    left: 130%;
    transition: left 0.75s ease-in-out;
}

.btn-register:hover,
.btn-eu-submit:hover,
.btn-v-submit:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #dd242a 0%, #b8141a 50%, #E81E25 100%);
    border-color: #fff28f;
    box-shadow: 0 8px 25px rgba(201, 31, 36, 0.6), 0 0 25px rgba(255, 215, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.btn-register:active,
.btn-eu-submit:active,
.btn-v-submit:active {
    transform: translateY(1px);
    box-shadow: 0 3px 12px rgba(164, 16, 21, 0.5), 0 0 10px rgba(255, 215, 0, 0.3);
}

.fanzone .btn-v-submit {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);
    border-color: #38bdf8;
    box-shadow: 0 5px 18px rgba(2, 132, 199, 0.45), 0 0 16px rgba(56, 189, 248, 0.35);
}

.fanzone .btn-v-submit:hover {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
    border-color: #7dd3fc;
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.6), 0 0 25px rgba(56, 189, 248, 0.55);
}

/* Countdown Display */
.eu-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 28px 0;
}

.countdown-item {
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 12px;
    padding: 14px 6px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.countdown-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffd700;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.countdown-label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    color: #e2e8f0;
    margin-top: 6px;
    letter-spacing: 0.5px;
    font-weight: 600;
}

@media (max-width: 480px) {
    .eu-card {
        padding: 24px 18px;
        border-radius: 16px;
    }

    .countdown-value {
        font-size: 1.4rem;
    }
}

/* ============================================================
   Compact Layout for Registration Form to fit in 1 screen height
   ============================================================ */
.eu-container.eu-container-compact {
    max-width: 680px;
    padding: 10px 14px;
    margin: auto;
}

.eu-card.eu-card-compact {
    padding: 18px 22px;
    border-radius: 16px;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.8), 0 0 20px var(--theme-gold-glow);
}

.eu-card-compact .eu-logo {
    margin-bottom: 4px;
}

.eu-card-compact .eu-logo i {
    font-size: 1.8rem;
}

.eu-card-compact .eu-title {
    font-size: 1.22rem;
    margin-bottom: 2px;
    font-weight: 700;
}

.eu-card-compact .eu-divider {
    height: 1.5px;
    margin: 6px auto 12px;
    width: 40%;
}

.eu-card-compact .form-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 2px;
}

.eu-card-compact .form-control,
.eu-card-compact .form-select {
    padding: 5px 10px;
    font-size: 0.85rem;
    height: 35px;
    border-radius: 8px;
}

.eu-card-compact .age-check {
    padding: 6px 10px 6px 30px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin-bottom: 0;
}

.eu-card-compact .gender-group {
    display: flex;
    justify-content: space-around;
    padding: 2px 10px;
    height: 35px;
    align-items: center;
    border-radius: 8px;
}

.eu-card-compact .gender-group .form-check {
    margin-bottom: 0;
    margin-right: 0;
}

.eu-card-compact .gender-group .form-check-label {
    font-size: 0.8rem;
    cursor: pointer;
}

.eu-card-compact .ticket-type-group {
    display: flex;
    gap: 8px;
}

.eu-card-compact .ticket-option {
    padding: 4px 8px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    border-radius: 8px;
}

.eu-card-compact .captcha-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.eu-card-compact .captcha-img {
    height: 35px;
    padding: 1px 6px;
    border-radius: 6px;
}

.eu-card-compact .captcha-refresh {
    height: 35px;
    width: 35px;
    font-size: 0.8rem;
    border-radius: 6px;
}

.eu-card-compact .btn-register {
    padding: 7px 16px;
    height: 35px;
    font-size: 0.85rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.3px;
}

/* Nav Pills / Switcher between Day tickets and Fanzone tickets */
.eu-tab-switcher {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.eu-tab-item {
    flex: 1;
    text-align: center;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #cbd5e1;
    text-decoration: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.eu-tab-item:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

.eu-tab-item.active {
    background: var(--theme-color, var(--theme-gold));
    color: #0b0f19 !important;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--theme-gold-glow);
}

.fanzone-badge-banner {
    height: 35px;
    background: rgba(0, 210, 255, 0.12);
    border: 1px solid rgba(0, 210, 255, 0.4);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: #00d2ff;
    letter-spacing: 0.5px;
}

/* ============================================================
   SPLIT LAYOUT: Hero Left & 1-Column Form Card DOCKED RIGHT
   ============================================================ */
body.eu-body-split {
    min-height: 100vh;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eu-container-split {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 24px clamp(24px, 4vw, 72px) 24px 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 100vh;
    box-sizing: border-box;
}

/* Left Hero Showcase - Ẩn cột mô tả theo yêu cầu để làm nổi bật KV lễ hội */
.eu-hero-section {
    display: none !important;
}

/* PC Bottom-Left Text Asset (text2.png theo yêu cầu người dùng) */
.eu-pc-bottom-left-text {
    position: fixed;
    bottom: clamp(18px, 3vh, 36px);
    left: clamp(20px, 2.8vw, 48px);
    z-index: 15;
    pointer-events: none;
    user-select: none;
    animation: fadeInText2 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.eu-pc-bottom-left-text .eu-pc-text-img {
    width: clamp(265px, 20.5vw, 396px);
    max-width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 25px rgba(212, 168, 67, 0.25));
}

@keyframes fadeInText2 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInHero {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.eu-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    background: rgba(212, 168, 67, 0.14);
    border: 1px solid rgba(212, 168, 67, 0.4);
    border-radius: 30px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--theme-gold, #d4a843);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 12px;
    box-shadow: 0 0 15px var(--theme-gold-glow);
}

.eu-hero-badge.fanzone {
    background: rgba(0, 210, 255, 0.12);
    border-color: rgba(0, 210, 255, 0.4);
    color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

/* Key Visual Title & Graphic Text Assets */
.eu-hero-title-wrapper {
    margin-bottom: 10px;
}

.eu-hero-title-img {
    max-width: 440px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 18px rgba(212, 168, 67, 0.45)) drop-shadow(0 0 30px rgba(212, 168, 67, 0.25));
    transition: transform 0.3s ease, filter 0.3s ease;
    user-select: none;
}

.eu-hero-title-img:hover {
    transform: scale(1.02);
    filter: drop-shadow(0 6px 24px rgba(255, 215, 0, 0.65)) drop-shadow(0 0 40px rgba(255, 215, 0, 0.4));
}

.eu-hero-text-img {
    max-width: 462px;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 16px rgba(212, 168, 67, 0.3));
    user-select: none;
}

.eu-hero-text-img-mobile {
    max-width: 352px;
    width: 92%;
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 20px rgba(212, 168, 67, 0.4));
    user-select: none;
}

.eu-hero-tagline {
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.eu-hero-tagline .gold-shimmer {
    background: linear-gradient(135deg, #fff3b0 0%, #ffd700 50%, #d4a843 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.eu-hero-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.eu-hero-title .text-gold {
    background: linear-gradient(135deg, #ffd700, #d4a843);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eu-hero-title .text-cyan {
    background: linear-gradient(135deg, #00d2ff, #0088ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.eu-hero-desc {
    font-size: 0.94rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 580px;
}

.eu-hero-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.eu-hero-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.88rem;
    color: #e2e8f0;
}

.eu-hero-feature-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-gold, #d4a843);
    flex-shrink: 0;
}

.eu-hero-feature-icon.fanzone {
    color: #00d2ff;
    border-color: rgba(0, 210, 255, 0.3);
}

/* Right Form Section: Docked to Right */
.eu-form-section-right {
    width: 380px;
    max-width: 100%;
    flex-shrink: 0;
    margin-left: auto;
    animation: fadeInFormRight 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInFormRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 1-Column Vertical Card - Light Frosted Glass (Nền trong suốt trắng mờ nhẹ, trong hơn) */
/* 1-Column Vertical Card - Form dang ky Mau Kem & Chu Do Habeco */
.eu-card-vertical {
    background-color: rgba(255, 248, 212, 0.8) !important;
    background: rgba(255, 248, 212, 0.8) !important;
    border: 1.5px solid #d4a843 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 20px !important;
    padding: 16px 20px;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35), 0 0 25px rgba(212, 168, 67, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #E81E25 !important;
}

.eu-card-vertical.fanzone {
    background-color: rgba(255, 248, 212, 0.8) !important;
    background: rgba(255, 248, 212, 0.8) !important;
    border: 1.5px solid #00d2ff !important;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.35), 0 0 25px rgba(0, 210, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #E81E25 !important;
}

.eu-card-vertical .card-v-header {
    text-align: center;
    margin-bottom: 12px;
}

.eu-card-vertical .card-v-title {
    font-family: 'SVN-Gilroy', 'Gilroy', sans-serif !important;
    font-size: clamp(0.9rem, 1.15vw, 1.05rem);
    font-weight: 800;
    color: #E81E25 !important;
    margin: 0;
    text-shadow: none !important;
    letter-spacing: 0.1px;
    line-height: 1.35;
    text-align: center;
}

.eu-card-vertical .card-v-subtitle {
    font-family: 'SVN-Gilroy', 'Gilroy', sans-serif !important;
    font-size: 0.78rem;
    color: #E81E25 !important;
    margin-top: 3px;
    font-weight: 600;
    text-shadow: none !important;
}

/* =========================================================
   TỐI ƯU MÀN HÌNH 1366x768 & LAPTOP (992px - 1400px)
   Form rộng 330px và căn lề phải 12px-14px.
   Đảm bảo mép trái form ở vị trí ~1022px, cách số "6" (940px)
   tới 82px -> Hoàn toàn KHÔNG CHE tiêu đề 2026 và vẫn cân đối.
========================================================= */
@media (min-width: 992px) and (max-width: 1400px) {
    .eu-bg {
        background-position: center top !important;
    }

    .eu-container-split {
        padding: 10px 14px 10px 10px !important;
        justify-content: flex-end !important;
    }

    .eu-form-section-right {
        width: 330px !important;
        max-width: 330px !important;
        margin-right: 0 !important;
    }

    .eu-card-vertical {
        padding: 12px 16px !important;
        border-radius: 16px !important;
    }

    .eu-card-vertical .card-v-header {
        margin-bottom: 8px !important;
    }

    .eu-card-vertical .card-v-title {
        font-size: 0.9rem !important;
        letter-spacing: 0 !important;
        line-height: 1.3 !important;
    }

    .eu-card-vertical .card-v-subtitle {
        font-size: 0.74rem !important;
        margin-top: 2px !important;
    }

    .eu-pc-bottom-left-text .eu-pc-text-img {
        width: 240px !important;
    }

    .fb-user-card {
        padding: 5px 8px !important;
        margin-bottom: 6px !important;
    }

    .fb-avatar {
        width: 28px !important;
        height: 28px !important;
    }

    .fb-user-card .small {
        font-size: 0.78rem !important;
    }

    #btnFbLogout {
        padding: 2px 7px !important;
        font-size: 0.72rem !important;
    }

    .fb-login-gate {
        padding: 7px 10px !important;
        margin-bottom: 6px !important;
    }

    .fb-login-gate .text-light-muted {
        font-size: 0.72rem !important;
        margin-bottom: 5px !important;
        line-height: 1.35 !important;
    }

    .fb-login-gate .btn-facebook {
        font-size: 0.78rem !important;
        padding: 5px 10px !important;
    }

    .form-group-v {
        margin-bottom: 5px !important;
    }

    .form-group-v label {
        font-size: 0.74rem !important;
        margin-bottom: 2px !important;
    }

    .form-group-v .form-control,
    .form-group-v .form-select {
        height: 31px !important;
        padding: 3px 8px !important;
        font-size: 0.82rem !important;
        border-radius: 6px !important;
    }

    .form-group-v .form-text {
        font-size: 0.68rem !important;
        line-height: 1.25 !important;
    }

    .form-group-v .ticket-type-group {
        gap: 6px !important;
    }

    .form-group-v .ticket-option {
        height: 33px !important;
        padding: 2px 6px !important;
        font-size: 0.76rem !important;
        gap: 5px !important;
    }

    .form-group-v .ticket-option .ticket-radio-check {
        width: 14px !important;
        height: 14px !important;
        font-size: 7px !important;
    }

    .form-group-v .age-box {
        padding: 4px 6px 4px 24px !important;
        font-size: 0.72rem !important;
        margin-bottom: 5px !important;
    }

    .captcha-row {
        gap: 6px !important;
    }

    .captcha-img {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 34px !important;
    }

    .captcha-refresh {
        flex: 0 0 34px !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        padding: 0 !important;
        font-size: 0.78rem !important;
    }

    .captcha-row input {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 34px !important;
        font-size: 0.85rem !important;
        text-transform: uppercase !important;
        text-align: center !important;
        letter-spacing: 2px !important;
        background: #ffffff !important;
        border: 1.5px solid #d4a843 !important;
        color: #E81E25 !important;
    }

    .btn-submit-v,
    .btn-v-submit {
        height: 35px !important;
        font-size: 0.86rem !important;
        margin-top: 6px !important;
        padding: 5px 12px !important;
    }

    .alert {
        padding: 5px 10px !important;
        font-size: 0.76rem !important;
        margin-bottom: 6px !important;
    }

    .eu-policy-link,
    .text-light-muted {
        font-size: 0.7rem !important;
    }
}

/* Tối ưu chiều cao màn hình laptop 768px (viewport khả dụng ~600px - 700px) - CHỈ ÁP DỤNG TRÊN LAPTOP <= 1400px */
@media (min-width: 992px) and (max-width: 1400px) and (max-height: 820px) {
    .eu-container-split {
        padding: 6px 12px 6px 8px !important;
    }

    .eu-form-section-right {
        width: 330px !important;
        max-width: 330px !important;
    }

    .eu-card-vertical {
        padding: 10px 14px !important;
        border-radius: 14px !important;
    }

    .eu-card-vertical .card-v-header {
        margin-bottom: 5px !important;
    }

    .eu-card-vertical .card-v-title {
        font-size: 0.84rem !important;
    }

    .fb-user-card {
        padding: 3px 6px !important;
        margin-bottom: 4px !important;
    }

    .fb-avatar {
        width: 24px !important;
        height: 24px !important;
    }

    .fb-login-gate {
        padding: 5px 8px !important;
        margin-bottom: 4px !important;
    }

    .fb-login-gate .text-light-muted {
        font-size: 0.68rem !important;
        margin-bottom: 4px !important;
        line-height: 1.25 !important;
    }

    .form-group-v {
        margin-bottom: 3px !important;
    }

    .form-group-v label {
        font-size: 0.7rem !important;
        margin-bottom: 1px !important;
    }

    .form-group-v .form-control,
    .form-group-v .form-select {
        height: 28px !important;
        padding: 2px 6px !important;
        font-size: 0.78rem !important;
    }

    .form-group-v .form-text {
        font-size: 0.65rem !important;
        line-height: 1.2 !important;
    }

    .captcha-row {
        gap: 5px !important;
    }

    .captcha-img {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 32px !important;
    }

    .captcha-refresh {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        padding: 0 !important;
        font-size: 0.75rem !important;
    }

    .captcha-row input {
        flex: 1 1 0 !important;
        width: 0 !important;
        min-width: 0 !important;
        height: 32px !important;
        font-size: 0.78rem !important;
        text-transform: uppercase !important;
        text-align: center !important;
        letter-spacing: 2px !important;
        background: #ffffff !important;
        border: 1.5px solid #d4a843 !important;
        color: #E81E25 !important;
    }

    .btn-submit-v,
    .btn-v-submit {
        height: 33px !important;
        font-size: 0.82rem !important;
        margin-top: 4px !important;
        padding: 4px 10px !important;
    }

    .alert {
        padding: 4px 8px !important;
        font-size: 0.72rem !important;
        margin-bottom: 4px !important;
    }
}

/* Vertical 1-column form fields */
.form-group-v {
    margin-bottom: 7px;
}

.form-group-v label {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #E81E25 !important;
    margin-bottom: 3px;
    text-shadow: none !important;
}

.form-group-v .form-control {
    height: 33px;
    padding: 4px 10px;
    font-size: 0.84rem;
    border-radius: 7px;
    background-color: #ffffff !important;
    border: 1.5px solid #d4a843 !important;
    color: #1e293b !important;
    font-weight: 600;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.form-group-v .form-control::placeholder {
    color: #94a3b8 !important;
    font-weight: normal;
}

.form-group-v .form-select {
    height: 34px;
    padding: 4px 28px 4px 10px;
    font-size: 0.84rem;
    border-radius: 7px;
    background-color: #ffffff !important;
    border: 1.5px solid #d4a843 !important;
    color: #1e293b !important;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E81E25' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 14px 10px;
}

.form-group-v .form-select option {
    background-color: #ffffff !important;
    color: #1e293b !important;
    font-size: 0.88rem;
    padding: 8px 10px;
}

.form-group-v .form-control:focus,
.form-group-v .form-select:focus {
    background-color: #ffffff !important;
    border-color: #E81E25 !important;
    box-shadow: 0 0 0 3px rgba(204, 40, 46, 0.25) !important;
    color: #1e293b !important;
    outline: none;
}

.form-group-v .form-control.is-invalid,
.form-group-v .input-group .form-control.is-invalid {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.35) !important;
}

.form-group-v .form-control.is-valid,
.form-group-v .input-group .form-control.is-valid {
    border-color: #22c55e !important;
    background-color: rgba(34, 197, 94, 0.12) !important;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.35) !important;
}

.fb-feedback-msg {
    font-size: 0.76rem;
    font-weight: 500;
    margin-top: 5px;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
    animation: fadeIn 0.2s ease-in-out;
}

.fb-feedback-msg.error {
    color: #b91c1c !important;
    background: rgba(239, 68, 68, 0.14) !important;
    border: 1.5px solid #ef4444 !important;
    font-weight: 600 !important;
}

.fb-feedback-msg.success {
    color: #15803d !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border: 1.5px solid #22c55e !important;
    font-weight: 600 !important;
}

.form-group-v .gender-group {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 33px;
    padding: 2px 8px;
    background: #ffffff !important;
    border-radius: 7px;
    border: 1.5px solid #d4a843 !important;
    color: #E81E25;
}

.form-group-v .gender-group .form-check-label {
    font-size: 0.78rem;
    cursor: pointer;
    color: #E81E25 !important;
    font-weight: 600;
    text-shadow: none !important;
}

/* ============================================================
   Ticket / Date Selection Group (Nhận diện ngày/loại vé đang chọn)
   ============================================================ */
.form-group-v .ticket-type-group {
    display: flex;
    gap: 6px;
}

.form-group-v .ticket-type-group .form-check {
    margin-bottom: 0;
}

.form-group-v .ticket-option {
    height: 36px;
    padding: 3px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 0.77rem;
    font-weight: 600;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    color: #cbd5e1 !important;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
    box-sizing: border-box;
}

.form-group-v .ticket-option:hover {
    border-color: rgba(212, 168, 67, 0.5) !important;
    color: #ffffff !important;
    background: rgba(212, 168, 67, 0.15) !important;
    transform: translateY(-1px);
}

/* Radio Check Dot / Checkmark Icon */
.form-group-v .ticket-option .ticket-radio-check {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.25);
}

.form-group-v .ticket-option .ticket-label-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 1. TRẠNG THÁI ĐANG CHỌN CHO NGÀY 1 & NGÀY 2 (Vàng Gold Lễ Hội Siêu Nổi Bật) */
.form-group-v input[type="radio"]:checked+.ticket-option {
    background: linear-gradient(135deg, rgba(212, 168, 67, 0.45) 0%, rgba(255, 215, 0, 0.28) 100%) !important;
    border: 1.8px solid var(--theme-gold, #d4a843) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 16px rgba(212, 168, 67, 0.5), inset 0 0 10px rgba(212, 168, 67, 0.25) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.form-group-v input[type="radio"]:checked+.ticket-option .ticket-radio-check {
    background: var(--theme-gold, #d4a843) !important;
    border-color: var(--theme-gold, #d4a843) !important;
    color: #0b0f19 !important;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.7);
}

/* 2. TRẠNG THÁI ĐANG CHỌN CHO VÉ FANZONE (Xanh Neon Sân Khấu Sôi Động) */
.form-group-v input[type="radio"]:checked+.ticket-option.ticket-option-fanzone {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.42) 0%, rgba(0, 136, 255, 0.26) 100%) !important;
    border: 1.8px solid #00d2ff !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.55), inset 0 0 10px rgba(0, 210, 255, 0.3) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8) !important;
}

.form-group-v input[type="radio"]:checked+.ticket-option.ticket-option-fanzone .ticket-radio-check {
    background: #00d2ff !important;
    border-color: #00d2ff !important;
    color: #0b0f19 !important;
    box-shadow: 0 0 8px rgba(0, 210, 255, 0.75);
}

.form-group-v .fanzone-banner {
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 210, 255, 0.16);
    border: 1px solid rgba(0, 210, 255, 0.45);
    border-radius: 7px;
    color: #00d2ff;
    font-size: 0.8rem;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}



.form-group-v .age-box {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1.5px solid #d4a843 !important;
    border-radius: 7px;
    padding: 5px 8px 5px 28px;
    font-size: 0.76rem;
    margin-bottom: 7px;
    color: #E81E25 !important;
    text-shadow: none !important;
}

.form-group-v .age-box label,
.form-group-v .age-box .form-check-label {
    color: #E81E25 !important;
    margin-bottom: 0;
    cursor: pointer;
    font-weight: 700;
    text-shadow: none !important;
}

.form-group-v .age-box.fanzone {
    background: rgba(15, 23, 42, 0.5) !important;
    border-color: rgba(0, 210, 255, 0.45) !important;
}

.btn-v-submit {
    height: 36px;
    font-size: 0.88rem;
    font-weight: 700;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ============================================================
   Mobile Landing Experience (Theo layout mockup chuẩn người dùng)
   ============================================================ */
@media (max-width: 991.98px) {
    .eu-pc-bottom-left-text {
        display: none !important;
    }

    .eu-bg {
        background-image: url('/images/mobile.png') !important;
        background-position: center bottom !important;
        background-size: cover !important;
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
    }

    body.eu-body-split {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    body.mobile-modal-open {
        overflow: hidden !important;
    }

    .eu-container-split {
        flex-direction: column !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 0 !important;
    }

    /* Màn hình Landing chuẩn Mobile theo mockup */
    .eu-mobile-landing {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(60px, 9vh, 90px) 16px 20px;
        box-sizing: border-box;
        text-align: center;
        position: relative;
        z-index: 5;
    }

    .eu-mobile-title-wrap {
        margin-bottom: clamp(14px, 2vh, 20px);
        animation: fadeInDown 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .eu-mobile-title-img {
        width: clamp(250px, 72vw, 290px);
        max-width: 100%;
        height: auto;
        filter: drop-shadow(0 4px 15px rgba(212, 168, 67, 0.45));
    }

    .eu-mobile-btn-wrap {
        margin-bottom: clamp(14px, 2.3vh, 22px);
        animation: btnPulseGlow 3s infinite ease-in-out, fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .eu-mobile-cta-btn {
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        outline: none;
        display: inline-block;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .eu-mobile-cta-btn:active {
        transform: scale(0.95);
    }

    .eu-mobile-btn-img {
        width: clamp(230px, 66vw, 265px);
        max-width: 100%;
        height: auto;
        filter: drop-shadow(0 6px 20px rgba(212, 168, 67, 0.55));
    }

    .eu-mobile-text-wrap {
        margin-bottom: 24px;
        animation: fadeInUp 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .eu-mobile-text-img {
        width: clamp(265px, 75vw, 310px);
        max-width: 100%;
        height: auto;
        filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.8));
    }

    @keyframes btnPulseGlow {

        0%,
        100% {
            transform: scale(1);
            filter: drop-shadow(0 4px 15px rgba(212, 168, 67, 0.45));
        }

        50% {
            transform: scale(1.045);
            filter: drop-shadow(0 8px 25px rgba(255, 215, 0, 0.75));
        }
    }

    /* Modal Form hiển thị khi bấm nút Đăng ký trên mobile: Giữ nguyên background festival */
    .eu-form-section-right {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        z-index: 9999;
        background-color: transparent !important;
        background-image: url('/images/mobile.png') !important;
        background-position: center center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 14px 50px;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .eu-form-section-right.show-mobile-form {
        display: flex !important;
        animation: mobileModalSlideUp 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }

    /* Ẩn landing view khi modal form mở để background không bị đè nút/chữ */
    body.mobile-modal-open #mobileLandingView,
    body:has(#formSectionRight.show-mobile-form) #mobileLandingView {
        display: none !important;
    }

    /* Card form tren mobile modal: Nen mau kem & chu do */
    .eu-form-section-right .eu-card-vertical {
        width: 100% !important;
        max-width: min(360px, 92vw) !important;
        margin: 0 auto !important;
        background-color: rgba(255, 248, 212, 0.8) !important;
        background: rgba(255, 248, 212, 0.8) !important;
        border: 1.5px solid #d4a843 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35), 0 0 25px rgba(212, 168, 67, 0.25) !important;
        border-radius: 18px !important;
        padding: 16px 18px 22px !important;
        color: #E81E25 !important;
        position: relative !important;
    }

    .card-v-header {
        position: relative !important;
        padding-right: 42px !important;
        padding-left: 6px !important;
        text-align: center !important;
        min-height: 36px !important;
    }

    .eu-card-vertical .card-v-title {
        font-size: clamp(0.82rem, 3.8vw, 0.95rem) !important;
        line-height: 1.35 !important;
        margin: 0 !important;
    }

    .btn-card-close-x {
        position: absolute !important;
        top: 0px !important;
        right: 0px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 50% !important;
        background: rgba(204, 40, 46, 0.12) !important;
        border: 1.5px solid rgba(204, 40, 46, 0.45) !important;
        color: #E81E25 !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 25 !important;
        padding: 0 !important;
        line-height: 1 !important;
        transition: all 0.2s ease !important;
    }

    .btn-card-close-x:hover,
    .btn-card-close-x:active {
        background: #E81E25 !important;
        color: #ffffff !important;
        border-color: #E81E25 !important;
    }

    .eu-mobile-modal-bar {
        display: none !important;
    }

    @keyframes mobileModalSlideUp {
        from {
            opacity: 0;
            transform: translateY(35px) scale(0.97);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .btn-register,
    .btn-eu-submit,
    .btn-v-submit {
        width: 100%;
        font-size: 0.98rem;
        padding: 12px 18px;
    }
}

@media (min-width: 992px) {
    .eu-mobile-landing {
        display: none !important;
    }

    .eu-mobile-modal-bar {
        display: none !important;
    }
}

/* =========================================================
   MÀN HÌNH 1920x1080 VÀ DESKTOP LỚN (>= 1401px)
   Giữ nguyên kích thước 440px to, đẹp, bề thế cân đối như cũ
========================================================= */
@media (min-width: 1651px) {
    .eu-form-section-right {
        display: block !important;
        position: relative !important;
        background: transparent !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        width: 380px !important;
        max-width: 380px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        z-index: 10 !important;
    }

    .eu-container-split {
        padding: 24px 80px 24px 24px !important;
        justify-content: flex-end !important;
    }

    .eu-card-vertical {
        padding: 20px 24px !important;
        border-radius: 20px !important;
    }

    .eu-card-vertical .card-v-title {
        font-size: 1.05rem !important;
    }
}

/* =========================================================
   MÀN HÌNH LAPTOP TIÊU CHUẨN (1151px - 1650px)
   Bao gồm 1366x768, 1440x900, 1536x864 (1080p scale 125%)
   Form 330px gọn gàng, mép phải 14px -> cách số 6 trong 2026
   hơn 100px, đảm bảo tuyệt đối không che số 6
========================================================= */
@media (min-width: 1151px) and (max-width: 1650px) {
    .eu-form-section-right {
        display: block !important;
        position: relative !important;
        background: transparent !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        width: 330px !important;
        max-width: 330px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        z-index: 10 !important;
    }

    .eu-container-split {
        padding: 10px 14px 10px 10px !important;
        justify-content: flex-end !important;
    }

    .eu-card-vertical {
        padding: 12px 16px !important;
        border-radius: 16px !important;
    }

    .eu-card-vertical .card-v-header {
        margin-bottom: 8px !important;
    }

    .eu-card-vertical .card-v-title {
        font-size: 0.95rem !important;
    }

    .eu-card-vertical .form-group-v {
        margin-bottom: 7px !important;
    }

    .eu-card-vertical .form-group-v label {
        font-size: 0.78rem !important;
        margin-bottom: 2px !important;
    }

    .eu-card-vertical .form-control,
    .eu-card-vertical .form-select {
        height: 33px !important;
        font-size: 0.8rem !important;
        padding: 3px 8px !important;
    }

    .eu-card-vertical .captcha-row {
        gap: 5px !important;
    }

    .eu-card-vertical .captcha-img {
        height: 33px !important;
        width: 105px !important;
    }

    .eu-card-vertical .captcha-refresh {
        width: 33px !important;
        height: 33px !important;
    }
}

/* =========================================================
   TỐI ƯU ĐẶC BIỆT MÀN HÌNH 1024x600 & MÀN HÌNH NHỎ (992px - 1150px HOẶC Chiều cao <= 680px):
   - Giảm form xuống 280px, ép sát mép phải
   - Dịch nền KV sang 72% để đẩy cụm title LỄ HỘI BIA HÀ NỘI 2026 sang trái (cách form ~60px)
   - Giảm mạnh font chữ và margin giữa các item để form nằm gọn gàng trong chiều cao 600px
========================================================= */
@media (min-width: 992px) and (max-width: 1150px),
(min-width: 992px) and (max-height: 680px) {
    .eu-bg {
        background-position: 72% top !important;
    }

    .eu-container-split {
        padding: 4px 8px 4px 4px !important;
        justify-content: flex-end !important;
    }

    .eu-form-section-right {
        display: block !important;
        position: relative !important;
        background: transparent !important;
        backdrop-filter: none !important;
        padding: 0 !important;
        width: 280px !important;
        max-width: 280px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        z-index: 10 !important;
    }

    .eu-card-vertical {
        padding: 6px 12px 8px 12px !important;
        border-radius: 12px !important;
    }

    .eu-card-vertical .card-v-header {
        margin-bottom: 4px !important;
    }

    .eu-card-vertical .card-v-title {
        font-size: 0.78rem !important;
        line-height: 1.2 !important;
    }

    .eu-card-vertical .card-v-subtitle {
        font-size: 0.65rem !important;
        margin-top: 1px !important;
    }

    .fb-user-card {
        padding: 2px 6px !important;
        margin-bottom: 3px !important;
    }

    .fb-avatar {
        width: 22px !important;
        height: 22px !important;
    }

    .fb-login-gate {
        padding: 4px 6px !important;
        margin-bottom: 3px !important;
    }

    .fb-login-gate .text-light-muted {
        font-size: 0.62rem !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
    }

    .fb-login-gate .btn-facebook {
        font-size: 0.72rem !important;
        padding: 2px 6px !important;
    }

    .form-group-v {
        margin-bottom: 2px !important;
    }

    .form-group-v label {
        font-size: 0.66rem !important;
        margin-bottom: 1px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .form-group-v .form-control,
    .form-group-v .form-select,
    .form-group-v .input-group-text {
        height: 25px !important;
        min-height: 25px !important;
        font-size: 0.72rem !important;
        padding: 1px 6px !important;
        border-radius: 4px !important;
    }

    .form-group-v .form-text,
    #fbHelpText {
        font-size: 0.58rem !important;
        line-height: 1.15 !important;
        margin-top: 1px !important;
        margin-bottom: 0px !important;
    }

    #fbValidationFeedback {
        font-size: 0.62rem !important;
        padding: 1px 4px !important;
        margin-top: 1px !important;
    }

    .captcha-row {
        gap: 4px !important;
    }

    .captcha-img {
        height: 25px !important;
        width: 80px !important;
        min-width: 80px !important;
    }

    .captcha-refresh {
        width: 25px !important;
        height: 25px !important;
        min-width: 25px !important;
        max-width: 25px !important;
        padding: 0 !important;
        font-size: 0.68rem !important;
    }

    .captcha-row input {
        height: 25px !important;
        font-size: 0.72rem !important;
        padding: 1px 4px !important;
    }

    .age-box {
        margin-bottom: 2px !important;
        padding: 1px 4px 1px 20px !important;
    }

    .age-box .form-check-input {
        width: 13px !important;
        height: 13px !important;
        margin-top: 1px !important;
    }

    .age-box label {
        font-size: 0.66rem !important;
        line-height: 1.2 !important;
    }

    .btn-submit-v,
    .btn-v-submit {
        height: 28px !important;
        font-size: 0.75rem !important;
        margin-top: 3px !important;
        padding: 2px 8px !important;
    }

    .eu-policy-link {
        font-size: 0.6rem !important;
    }

    .eu-pc-bottom-left-text .eu-pc-text-img {
        width: 170px !important;
    }

    .eu-card.eu-success-card {
        margin-top: clamp(120px, 20vh, 160px) !important;
        margin-bottom: 12px !important;
    }
}

/* Facebook Login & Profile Styling */
.btn-facebook {
    background: #1877f2;
    color: #ffffff !important;
    border: none;
    font-weight: 600;
    transition: all 0.25s ease;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.35);
}

.btn-facebook:hover {
    background: #166fe5;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(24, 119, 242, 0.45);
}

.fb-login-gate {
    background: rgba(15, 23, 42, 0.45) !important;
    border: 1px dashed rgba(255, 255, 255, 0.35) !important;
    border-radius: 10px;
    padding: 12px 10px;
    margin-bottom: 12px;
    text-align: center;
}

.fb-login-gate .text-muted,
.fb-login-gate .text-light-muted {
    color: #f1f5f9 !important;
    font-size: 0.8rem !important;
    line-height: 1.45;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

/* Global text contrast on dark background */
body.eu-body .text-muted,
.eu-body .text-muted,
.eu-hero-feature-item span,
.eu-hero-feature-item .text-muted,
.form-text,
.form-text.text-muted,
.form-group-v .form-text {
    color: #cbd5e1 !important;
}

.eu-card-vertical .card-v-subtitle {
    color: #E81E25 !important;
    text-shadow: none !important;
}

.eu-card-vertical .form-group-v .form-text,
.eu-card-vertical .form-text,
.eu-card-vertical .form-text.text-muted {
    color: #a41015 !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

.eu-card-vertical .fb-login-gate .text-muted,
.eu-card-vertical .fb-login-gate .text-light-muted {
    color: #E81E25 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

.eu-card-vertical .eu-policy-link,
.eu-card-vertical a.text-muted {
    color: #E81E25 !important;
    font-weight: 600 !important;
    transition: color 0.2s ease;
    text-shadow: none !important;
}

.eu-card-vertical .eu-policy-link:hover,
.eu-card-vertical a.text-muted:hover {
    color: #E81E25 !important;
    text-decoration: underline !important;
}

.eu-policy-link,
a.text-muted {
    color: #cbd5e1 !important;
    transition: color 0.2s ease;
}

.eu-policy-link:hover,
a.text-muted:hover {
    color: var(--theme-gold, #d4a843) !important;
    text-decoration: underline !important;
}

.fb-user-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(24, 119, 242, 0.4);
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
}

.eu-card-vertical .fb-user-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1.5px solid rgba(24, 119, 242, 0.4) !important;
    color: #1e293b !important;
}

.eu-card-vertical .fb-user-card .fb-name {
    color: #E81E25 !important;
    font-weight: 700 !important;
}

.fb-user-card .fb-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #1877f2;
    object-fit: cover;
}

.form-locked-overlay {
    opacity: 0.62;
    pointer-events: none;
    user-select: none;
    filter: grayscale(0.25);
    transition: all 0.3s ease;
}

/* Privacy & Data Deletion Page */
.eu-privacy-card {
    line-height: 1.7;
    font-size: 0.95rem;
    color: #e2e8f0;
}

.eu-privacy-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--theme-gold, #d4a843);
    margin-top: 1.75rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(212, 168, 67, 0.2);
    padding-bottom: 6px;
}

.eu-privacy-card h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: #f8fafc;
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
}

.eu-privacy-card ul,
.eu-privacy-card ol {
    padding-left: 1.4rem;
    margin-bottom: 1rem;
}

.eu-privacy-card li {
    margin-bottom: 0.45rem;
}

.eu-privacy-highlight {
    background: rgba(212, 168, 67, 0.08);
    border-left: 4px solid var(--theme-gold, #d4a843);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    margin: 14px 0;
}

.eu-privacy-alert {
    background: rgba(24, 119, 242, 0.1);
    border-left: 4px solid #1877f2;
    padding: 14px 16px;
    border-radius: 0 8px 8px 0;
    margin: 16px 0;
}

.eu-privacy-step {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.eu-privacy-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--theme-gold, #d4a843);
    color: #0b0f19;
    font-weight: 700;
    font-size: 0.85rem;
    margin-right: 8px;
}

/* =========================================================
   TỐI ƯU ĐỒNG BỘ CHUẨN KIỂU PC CHO IPAD & TABLET XOAY NGANG (LANDSCAPE)
   - Khi xoay ngang: màn hình tương tự PC nên đồng bộ kiểu PC luôn
   - Ẩn hoàn toàn tiêu đề HTML để không bao giờ bị hiển thị 2 tiêu đề
   - Hiển thị trực tiếp form bên phải, nền PC background.png
========================================================= */
@media (orientation: landscape) and (min-width: 768px) and (min-height: 500px) {

    /* 1. Ẩn triệt để mọi tiêu đề HTML và landing mobile view để không bị trùng 2 tiêu đề */
    .eu-mobile-title-wrap,
    .eu-mobile-landing,
    #mobileLandingView,
    .eu-hero-section,
    .eu-hero-title-wrapper,
    .btn-card-close-x {
        display: none !important;
    }

    /* 2. Áp dụng nền PC (background.png) */
    .eu-bg {
        background-image:
            linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(11, 15, 25, 0.05) 30%, rgba(11, 15, 25, 0.35) 70%, rgba(11, 15, 25, 0.75) 100%),
            url('/images/background.png') !important;
        background-position: 72% top !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-attachment: fixed !important;
    }

    /* 3. Hiển thị text thời gian địa điểm góc dưới trái PC */
    .eu-pc-bottom-left-text {
        display: block !important;
    }

    /* 4. Đưa layout về kiểu PC: form hiển thị trực tiếp ở bên phải */
    body.eu-body-split {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    .eu-container-split {
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
        padding: 10px 16px !important;
    }

    .eu-form-section-right {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 320px !important;
        max-width: 320px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        background: transparent !important;
        background-image: none !important;
        padding: 0 !important;
        z-index: 10 !important;
        overflow-y: visible !important;
        animation: none !important;
    }

    .eu-form-section-right .eu-card-vertical {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        border-radius: 16px !important;
    }

    .card-v-header {
        padding-right: 0 !important;
        padding-left: 0 !important;
        min-height: auto !important;
    }

    /* 5. Với các trang thông báo (Closed, ComingSoon, Overload, RegisterSuccess) kiểu PC */
    body.eu-body:not(.eu-body-split) {
        justify-content: center !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .eu-closed,
    .eu-comingsoon,
    .eu-overload,
    .eu-success {
        justify-content: center !important;
        min-height: auto !important;
    }

    .eu-closed-card,
    .eu-card.eu-closed-card,
    .eu-comingsoon .eu-card,
    .eu-overload .eu-card,
    .eu-closed .eu-card {
        margin: 0 auto !important;
        position: relative !important;
        top: 20px !important;
        max-width: 680px !important;
        padding: 30px 36px !important;
    }

    .eu-success .eu-card,
    .eu-card.eu-success-card {
        margin: 0 auto !important;
        max-width: 530px !important;
        padding: 26px 28px !important;
    }
}

/* =========================================================
   TỐI ƯU MÀN HÌNH 1920x1080 VÀ DESKTOP LỚN (>= 1651px)
   Dịch form vào bên trong một tí (cách lề phải 80px) để không bị sát mép phải
========================================================= */
@media (min-width: 1651px) {
    .eu-container-split {
        padding: 24px 80px 24px 24px !important;
        justify-content: flex-end !important;
    }

    .eu-form-section-right {
        width: 380px !important;
        max-width: 380px !important;
        margin-left: auto !important;
        margin-right: 0 !important;
    }

    .eu-card-vertical {
        width: 100% !important;
        max-width: 380px !important;
        padding: 18px 22px !important;
        border-radius: 20px !important;
    }

    .eu-card-vertical .card-v-title {
        font-size: 1.05rem !important;
    }
}