/* =======================================
   LCTv - CSS riêng cho mobile trang lập lá số
   File này chỉ ghi đè giao diện mobile, không đụng logic PC
   ======================================= */

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    .lctv-laso-page-wrap {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .lctv-laso-home-shell {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .lctv-laso-hero-stage {
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        aspect-ratio: auto !important;
        min-height: auto !important;
        height: auto !important;
        padding: 8px 10px 14px !important;
        background-image: none !important;
        background-color: transparent !important;
        background-size: auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        box-shadow: none !important;
    }

    .lctv-laso-hero-form-slot {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        transform: none !important;
        margin: 0 auto !important;
        padding: 14px 12px 16px !important;
        border-radius: 20px !important;
        background: rgba(255, 248, 235, 0.95) !important;
        border: 1px solid rgba(229, 184, 104, 0.46) !important;
        box-shadow: 0 16px 38px rgba(48, 8, 6, 0.26) !important;
        backdrop-filter: blur(2px);
    }

    #input-section.lctv-hero-form-panel,
    .lctv-hero-form-panel {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .lctv-hero-form-panel .laso-form-title-block {
        margin: 0 0 12px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 18px !important;
        line-height: 1.22 !important;
        letter-spacing: 0.025em !important;
        white-space: normal !important;
    }

    .lctv-hero-form-panel .laso-form-title-block p {
        margin-top: 6px !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        max-width: 100% !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .lctv-hero-form-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px 10px !important;
        margin: 0 !important;
    }

    .lctv-hero-form-grid > .lctv-form-field:first-child,
    .lctv-date-field,
    .lctv-form-options,
    .lctv-submit-row,
    .lctv-hero-form-panel #admin-toggle-strip {
        grid-column: 1 / -1 !important;
    }

    .lctv-hero-form-grid > .lctv-form-field:nth-child(2),
    .lctv-hero-form-grid > .lctv-form-field:nth-child(3) {
        grid-column: auto !important;
    }

    .lctv-hero-form-panel .form-label {
        margin: 0 0 6px !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        letter-spacing: 0.035em !important;
    }

    .lctv-hero-form-panel .custom-input,
    .lctv-hero-form-panel .radio-group,
    .lctv-hero-form-panel .admin-inline-stepper {
        min-height: 43px !important;
        border-radius: 11px !important;
    }

    .lctv-hero-form-panel .custom-input {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 14px !important;
    }

    .lctv-hero-form-panel .radio-group {
        padding: 3px !important;
    }

    .lctv-hero-form-panel .radio-group label {
        height: 35px !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }

    .lctv-hero-form-panel .radio-label-text {
        gap: 2px !important;
        padding: 0 4px !important;
        white-space: nowrap !important;
    }

    .lctv-date-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .lctv-date-row .custom-input {
        text-align: center !important;
        text-align-last: center !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 15px !important;
    }

    .lctv-hero-form-panel .admin-inline-stepper .custom-input,
    .lctv-hero-form-panel .admin-inline-stepper .admin-inline-select,
    .lctv-hero-form-panel .admin-inline-stepper .admin-inline-input {
        min-height: 41px !important;
        font-size: 14px !important;
    }

    .lctv-form-options {
        margin-top: 0 !important;
        gap: 8px !important;
    }

    .lctv-hero-form-panel #admin-toggle-strip {
        margin-top: 0 !important;
        padding: 7px 10px !important;
        border-radius: 11px !important;
    }

    .lctv-submit-row {
        padding-top: 4px !important;
    }

    .lctv-hero-form-panel .btn-submit {
        min-height: 54px !important;
        border-radius: 13px !important;
        font-size: 17px !important;
        letter-spacing: 0.03em !important;
    }

    .lctv-hero-form-panel .laso-form-footnote {
        margin-top: 9px !important;
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .lctv-laso-result-shell {
        margin-top: 18px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .lctv-laso-quick-menu {
        right: 14px !important;
        bottom: calc(154px + env(safe-area-inset-bottom)) !important;
        z-index: 99998 !important;
    }

    .lctv-laso-quick-toggle {
        width: 48px !important;
        height: 48px !important;
        border-radius: 15px !important;
    }

    .lctv-laso-quick-panel {
        right: 0 !important;
        bottom: 58px !important;
        width: 204px !important;
    }
}

@media (max-width: 390px) {
    .lctv-laso-hero-stage {
        padding: 6px 7px 12px !important;
        background-image: none !important;
        box-shadow: none !important;
    }

    .lctv-laso-hero-form-slot {
        padding: 12px 10px 14px !important;
        border-radius: 18px !important;
    }

    .lctv-hero-form-grid {
        gap: 8px 8px !important;
    }

    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 17px !important;
    }

    .lctv-hero-form-panel .radio-group label {
        font-size: 11px !important;
    }

    .lctv-hero-form-panel .btn-submit {
        font-size: 16px !important;
    }
}

/* Fix v7: Mobile bỏ toàn bộ nền ảnh cũ của trang, chỉ giữ nền phẳng sạch */
@media (max-width: 767px) {
    html,
    body,
    body.bg-enlightenment,
    .bg-enlightenment,
    .lctv-laso-page-wrap,
    .lctv-laso-home-shell,
    .lctv-laso-main,
    .lctv-laso-hero-wrap,
    .lctv-laso-hero-stage,
    .lctv-laso-result-shell,
    main {
        background-image: none !important;
        background: #fff7eb !important;
        background-color: #fff7eb !important;
        background-attachment: scroll !important;
        background-size: auto !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }

    body::before,
    body::after,
    .bg-enlightenment::before,
    .bg-enlightenment::after,
    .lctv-laso-page-wrap::before,
    .lctv-laso-page-wrap::after,
    .lctv-laso-home-shell::before,
    .lctv-laso-home-shell::after,
    .lctv-laso-hero-stage::before,
    .lctv-laso-hero-stage::after {
        content: none !important;
        display: none !important;
        background-image: none !important;
        background: none !important;
    }

    .lctv-laso-home-shell {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .lctv-laso-hero-stage {
        background: #fff7eb !important;
    }

    .lctv-laso-hero-form-slot {
        margin-top: 0 !important;
        background: #fff8ed !important;
    }
}

/* Fix v8: tối ưu cuộn mobile + font Inter nhẹ hơn */
@media (max-width: 767px) {
    html,
    body {
        font-family: 'Inter', Arial, sans-serif !important;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: auto !important;
        overscroll-behavior-y: contain;
    }

    .lctv-laso-page-wrap,
    .lctv-laso-home-shell,
    .lctv-laso-hero-stage,
    .lctv-laso-hero-form-slot,
    .lctv-hero-form-panel,
    .lctv-hero-form-panel *,
    .lctv-laso-result-shell,
    .lctv-laso-result-shell * {
        font-family: 'Inter', Arial, sans-serif !important;
    }

    .lctv-laso-hero-stage {
        padding-top: 2px !important;
        padding-bottom: 10px !important;
    }

    .lctv-laso-hero-form-slot {
        box-shadow: 0 8px 18px rgba(64, 21, 12, 0.12) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateZ(0) !important;
    }

    .lctv-hero-form-panel .laso-form-title-block {
        margin-bottom: 10px !important;
    }

    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-family: 'Inter', Arial, sans-serif !important;
        font-weight: 650 !important;
        letter-spacing: 0.015em !important;
    }

    .lctv-hero-form-panel .laso-form-title-block p {
        font-family: 'Inter', Arial, sans-serif !important;
        font-weight: 400 !important;
        font-size: 12px !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .lctv-hero-form-panel .form-label {
        font-weight: 600 !important;
        letter-spacing: 0.025em !important;
    }

    .lctv-hero-form-panel .custom-input,
    .lctv-hero-form-panel .radio-group label,
    .lctv-hero-form-panel .radio-label-text,
    .lctv-hero-form-panel .admin-inline-stepper .custom-input,
    .lctv-hero-form-panel .admin-inline-stepper .admin-inline-select,
    .lctv-hero-form-panel .admin-inline-stepper .admin-inline-input {
        font-weight: 600 !important;
    }

    .lctv-hero-form-panel .btn-submit {
        font-family: 'Inter', Arial, sans-serif !important;
        font-weight: 650 !important;
        letter-spacing: 0.01em !important;
        box-shadow: 0 8px 16px rgba(139, 15, 15, 0.18) !important;
    }

    .lctv-hero-form-panel .laso-form-footnote,
    .lctv-hero-form-panel .lctv-form-options,
    .lctv-hero-form-panel .lctv-form-options * {
        font-weight: 400 !important;
    }

    .lctv-laso-result-shell,
    .glass-card,
    .lctv-laso-result-shell .glass-card {
        box-shadow: 0 8px 18px rgba(64, 21, 12, 0.08) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    .lctv-laso-quick-toggle,
    .lctv-laso-quick-panel {
        box-shadow: 0 8px 18px rgba(64, 21, 12, 0.18) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateZ(0) !important;
    }
}

@media (max-width: 390px) {
    .lctv-laso-hero-stage {
        padding-top: 0 !important;
    }

    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 16px !important;
    }

    .lctv-hero-form-panel .laso-form-title-block p {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }
}

/* Fix v9: giữ chữ Inter nhưng trả lại font icon Font Awesome trên mobile */
@media (max-width: 767px) {
    .fa,
    .fas,
    .fa-solid,
    .far,
    .fa-regular,
    .fal,
    .fa-light,
    i.fa,
    i.fas,
    i.fa-solid,
    i.far,
    i.fa-regular,
    i.fal,
    i.fa-light,
    i[class^="fa-"],
    i[class*=" fa-"] {
        font-family: "Font Awesome 6 Free" !important;
        font-style: normal !important;
        line-height: 1 !important;
        speak: never;
    }

    .fas,
    .fa-solid,
    i.fas,
    i.fa-solid,
    i[class^="fa-"]:not(.far):not(.fa-regular):not(.fab):not(.fa-brands),
    i[class*=" fa-"]:not(.far):not(.fa-regular):not(.fab):not(.fa-brands) {
        font-weight: 900 !important;
    }

    .far,
    .fa-regular,
    i.far,
    i.fa-regular {
        font-weight: 400 !important;
    }

    .fab,
    .fa-brands,
    i.fab,
    i.fa-brands {
        font-family: "Font Awesome 6 Brands" !important;
        font-weight: 400 !important;
    }

    .lctv-hero-form-panel svg,
    .lctv-laso-result-shell svg,
    .lctv-laso-quick-menu svg {
        font-family: initial !important;
    }

    .lctv-laso-quick-menu:hover .lctv-laso-quick-panel,
    .lctv-laso-quick-menu:focus-within .lctv-laso-quick-panel {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(8px) scale(0.98) !important;
    }

    .lctv-laso-quick-menu.is-open .lctv-laso-quick-panel,
    .lctv-laso-quick-menu.is-open:hover .lctv-laso-quick-panel,
    .lctv-laso-quick-menu.is-open:focus-within .lctv-laso-quick-panel {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) scale(1) !important;
    }
}

/* LCTv v11 - mobile bỏ nền gạch nút lập lá số */
@media (max-width: 767px) {
    #input-section.lctv-hero-form-panel .btn-submit,
    .lctv-hero-form-panel .btn-submit {
        background:
            radial-gradient(circle at 50% 0%, rgba(255, 228, 164, .30), rgba(255, 228, 164, 0) 45%),
            linear-gradient(180deg, #c32622 0%, #9d1512 50%, #720907 100%) !important;
        border: 1px solid rgba(236, 190, 105, .70) !important;
        box-shadow:
            0 14px 24px rgba(93, 9, 7, .30),
            inset 0 1px 0 rgba(255, 234, 174, .42),
            inset 0 -8px 14px rgba(73, 5, 5, .22) !important;
        text-shadow: 0 1px 0 rgba(60, 5, 5, .32) !important;
    }
}

/* LCTv v14 - mobile: thu gọn tiêu đề form để không xuống dòng thô */
@media (max-width: 767px) {
    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 16px !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 390px) {
    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 15px !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
    }
}

@media (max-width: 350px) {
    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 14px !important;
        white-space: normal !important;
    }
}


/* LCTv v15 - mobile: hạ form xuống nhẹ và làm tiêu đề mềm/nhỏ hơn */
@media (max-width: 767px) {
    .lctv-laso-hero-stage {
        padding-top: 12px !important;
    }

    .lctv-laso-hero-form-slot {
        margin-top: 6px !important;
    }

    .lctv-hero-form-panel .laso-form-title-block {
        margin-bottom: 9px !important;
    }

    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: clamp(13px, 3.35vw, 15px) !important;
        line-height: 1.18 !important;
        letter-spacing: 0.005em !important;
        font-weight: 650 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 12.6px !important;
        white-space: nowrap !important;
    }
}

/* LCTv v16 - mobile: tiêu đề form ngắn, nhỏ và mềm hơn */
@media (max-width: 767px) {
    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: clamp(18px, 5vw, 20px) !important;
        line-height: 1.18 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 360px) {
    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 17px !important;
    }
}


/* LCTv v17 - mobile: hạ tiêu đề xuống và căn trái giờ sinh */
@media (max-width: 767px) {
    .lctv-hero-form-panel .laso-form-title-block {
        padding-top: 8px !important;
        margin-bottom: 11px !important;
    }

    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: clamp(17px, 4.45vw, 19px) !important;
        line-height: 1.18 !important;
        font-weight: 650 !important;
    }

    .lctv-hero-form-panel .admin-hour-stepper .admin-inline-select,
    .lctv-hero-form-panel #gio-sinh {
        text-align: left !important;
        text-align-last: left !important;
        padding-left: 8px !important;
        padding-right: 4px !important;
        font-size: 13.5px !important;
    }

    .lctv-hero-form-panel .admin-hour-stepper .admin-inline-select option,
    .lctv-hero-form-panel #gio-sinh option {
        font-size: 13.5px !important;
        text-align: left !important;
    }
}

@media (max-width: 360px) {
    .lctv-hero-form-panel .laso-form-title-block h2 {
        font-size: 16.5px !important;
    }
}

/* LCTv v20 - FAQ/SEO section mobile */
@media (max-width: 767px) {
    .lctv-laso-seo-section {
        padding: 20px 10px 28px !important;
        background: linear-gradient(180deg, #fff6e8 0%, #fffaf2 100%) !important;
        border-top: 1px solid rgba(217, 158, 72, .20) !important;
    }

    .lctv-laso-seo-inner {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        margin: 0 auto !important;
    }

    .lctv-laso-faq-column,
    .lctv-laso-seo-article {
        border-radius: 18px !important;
        padding: 16px 13px !important;
        background: rgba(255, 252, 246, .95) !important;
        box-shadow: 0 10px 24px rgba(78, 34, 16, .10) !important;
    }

    .lctv-section-kicker {
        gap: 8px !important;
        font-size: 12px !important;
        letter-spacing: .045em !important;
        margin-bottom: 12px !important;
    }

    .lctv-section-kicker span {
        width: 34px !important;
    }

    .lctv-faq-list {
        gap: 8px !important;
    }

    .lctv-faq-item {
        border-radius: 13px !important;
    }

    .lctv-faq-item summary {
        grid-template-columns: 26px minmax(0, 1fr) 14px !important;
        gap: 8px !important;
        padding: 11px 10px !important;
    }

    .lctv-faq-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }

    .lctv-faq-item strong {
        font-size: 13px !important;
        line-height: 1.32 !important;
    }

    .lctv-faq-item p {
        padding: 0 11px 12px 44px !important;
        font-size: 12.5px !important;
        line-height: 1.62 !important;
    }

    .lctv-laso-seo-article h2 {
        font-size: 19px !important;
        line-height: 1.28 !important;
        margin-bottom: 10px !important;
    }

    .lctv-laso-seo-article p {
        font-size: 13px !important;
        line-height: 1.72 !important;
        margin-bottom: 10px !important;
    }

    .lctv-seo-tags {
        gap: 7px !important;
        margin-top: 12px !important;
    }

    .lctv-seo-tags span {
        min-height: 30px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

/* LCTv v21 - mobile: ô giờ sinh căn giữa, option xổ vẫn căn trái */
@media (max-width: 767px) {
    .lctv-hero-form-panel .admin-hour-stepper .admin-inline-select,
    .lctv-hero-form-panel #gio-sinh {
        text-align: center !important;
        text-align-last: center !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    .lctv-hero-form-panel .admin-hour-stepper .admin-inline-select option,
    .lctv-hero-form-panel #gio-sinh option {
        text-align: left !important;
        direction: ltr !important;
    }
}