/* cyrillic-ext */
/*//Font SF-Pro do Momo yêu cầu để đồng nhất trải nghiệm*/
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Regular.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Regular.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Regular.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Regular.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Regular.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Regular.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Regular.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Semibold.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Semibold.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Semibold.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Semibold.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Semibold.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Semibold.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Semibold.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Bold.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Bold.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* greek-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Bold.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}

/* greek */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Bold.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}

/* vietnamese */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Bold.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
}

/* latin-ext */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Bold.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url(../fonts/SF-Pro-Text-Bold.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    background: #fff !important;
    font-family: 'Source Sans Pro', serif !important;
}

.btn-light {
    border: solid 1px #e8e8e8 !important;
    background: #fff !important;
}

.btn-small {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px
    }

    .container,
    .content {
        padding-left: 0;
        padding-right: 0
    }
}

@media screen and (min-width: 1600px) {
    body {
        font-size: 14px
    }
}

/* =============================================================
   FIX: Android Momo WebView — trắng trang / nhấp nháy khi scroll
   Samsung Android 14 WebView GPU/Renderer Compositor Failure
   
   NGUYÊN NHÂN GỐC:
   - -webkit-overflow-scrolling: touch tạo compositor layer RIÊNG cho mỗi
     scroll container → out-of-memory trên Samsung A series GPU
   - filter: grayscale() trên icon tạo GPU layer riêng
   - position: sticky + z-index cao tạo compositor layer
   - scroll-behavior: smooth tạo animated compositor layer
   ============================================================= */

/* ============================================================
   KHỐI 1: Sát thủ compositor — chặn TẤT CẢ GPU layer triggers
   Áp dụng MỌI THỨ trong scope Android Momo
   ============================================================ */

/* 1a. KILL -webkit-overflow-scrolling: touch — nguyên nhân số 1 */
html[data-app="momo-app"][data-os="android"],
html[data-app="momo-app"][data-os="android"] *,
html[data-app="momo-app"][data-os="android"] *::before,
html[data-app="momo-app"][data-os="android"] *::after {
    -webkit-overflow-scrolling: auto !important;
}

/* 1b. KILL will-change — mỗi will-change tạo 1 compositor layer */
html[data-app="momo-app"][data-os="android"],
html[data-app="momo-app"][data-os="android"] *,
html[data-app="momo-app"][data-os="android"] *::before,
html[data-app="momo-app"][data-os="android"] *::after {
    will-change: auto !important;
    -webkit-transform-style: flat !important;
    transform-style: flat !important;
}

/* 1c. KILL filter — filter tạo GPU composition layer */
html[data-app="momo-app"][data-os="android"],
html[data-app="momo-app"][data-os="android"] .page-content,
html[data-app="momo-app"][data-os="android"] .content-wrapper,
html[data-app="momo-app"][data-os="android"] .content-inner,
html[data-app="momo-app"][data-os="android"] #content-page,
html[data-app="momo-app"][data-os="android"] .icon-menu,
html[data-app="momo-app"][data-os="android"] .icon-menu.inactive,
html[data-app="momo-app"][data-os="android"] img {
    filter: none !important;
    -webkit-filter: none !important;
}

/* 1d. KILL scroll-behavior: smooth — tạo animated compositor layer */
html[data-app="momo-app"][data-os="android"],
html[data-app="momo-app"][data-os="android"] body,
html[data-app="momo-app"][data-os="android"] .page-content,
html[data-app="momo-app"][data-os="android"] .content-wrapper,
html[data-app="momo-app"][data-os="android"] .content-inner,
html[data-app="momo-app"][data-os="android"] #content-page,
html[data-app="momo-app"][data-os="android"] * {
    scroll-behavior: auto !important;
}

/* 1e. KILL transform trên scroll containers */
html[data-app="momo-app"][data-os="android"] .page-content,
html[data-app="momo-app"][data-os="android"] .content-wrapper,
html[data-app="momo-app"][data-os="android"] .content-inner,
html[data-app="momo-app"][data-os="android"] #content-page {
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
    perspective: none !important;
    -webkit-perspective: none !important;
    contain: none !important;
}

/* 1f. KILL transform trên fixed/sticky — tránh compositor layer proliferation */
html[data-app="momo-app"][data-os="android"] .position-fixed,
html[data-app="momo-app"][data-os="android"] .fixed-bottom,
html[data-app="momo-app"][data-os="android"] [class*="sticky"],
html[data-app="momo-app"][data-os="android"] #momoTabs,
html[data-app="momo-app"][data-os="android"] .momo-add-order-sticky,
html[data-app="momo-app"][data-os="android"] #floatingActionBtn {
    transform: none !important;
    -webkit-transform: none !important;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
}

/* 1g. KILL scroll-snap — tạo compositor snapping layer */
html[data-app="momo-app"][data-os="android"] * {
    scroll-snap-type: none !important;
}

/* ============================================================
   KHỐI 2: Giảm thiểu GPU pressure trên fixed/sticky
   ============================================================ */

/* 2a. Giảm box-shadow trên fixed/sticky — box-shadow tạo shadow layer */
html[data-app="momo-app"][data-os="android"] .position-fixed,
html[data-app="momo-app"][data-os="android"] .fixed-bottom,
html[data-app="momo-app"][data-os="android"] #momoTabs,
html[data-app="momo-app"][data-os="android"] .momo-add-order-sticky,
html[data-app="momo-app"][data-os="android"] #floatingActionBtn,
html[data-app="momo-app"][data-os="android"] .shadow,
html[data-app="momo-app"][data-os="android"] .shadow-sm,
html[data-app="momo-app"][data-os="android"] .shadow-lg {
    box-shadow: none !important;
}

/* ============================================================
   KHỐI 3: Overscroll containment
   ============================================================ */

html[data-app="momo-app"][data-os="android"] {
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: auto !important;
}

html[data-app="momo-app"][data-os="android"] body {
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: auto !important;
}

/* ============================================================
   KHỐI 4: Repaint nudge — nhẹ nhàng force GPU refresh
   ============================================================ */

html[data-app="momo-app"][data-os="android"].android-webview-repaint-nudge .content-inner,
html[data-app="momo-app"][data-os="android"].android-webview-repaint-nudge #content-page,
html[data-app="momo-app"][data-os="android"] .android-webview-repaint-target {
    opacity: .9999;
    outline: 1px solid transparent;
}

body {
    height: 100%;
    overflow: auto;
    overscroll-behavior-y: contain;
}

.page-content {
    overflow: visible;
}

/* scroll-behavior: smooth bị kill bởi khối Android fix ở trên.
   Chỉ áp dụng trên non-Android. */
@media (prefers-reduced-motion:no-preference) {
    html:not([data-os="android"]) .content-inner {
        scroll-behavior: smooth
    }
}

/* --- 4. Tránh filter/compositor layer trên tab bar icon khi cuộn --- */
#momoTabs .icon-menu.inactive {
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 0.4;
}

/* --- 5. Sidebar ẩn trên mobile Momo --- */
.sidebar-main {
    display: none !important;
}

body .content-inner {
    overflow-y: visible;
}

.content {
    -ms-flex-positive: 1;
    flex-grow: 1;
}

/* ============================================================
   KHỐI 5: KILL tất cả animations/transitions trên Android
   Bootstrap spinner, dropdown animation, transition đều tạo
   compositor layers — sát thủ trên Samsung A series GPU
   ============================================================ */

html[data-app="momo-app"][data-os="android"] *,
html[data-app="momo-app"][data-os="android"] *::before,
html[data-app="momo-app"][data-os="android"] *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    -webkit-animation-duration: 0s !important;
    -webkit-animation-delay: 0s !important;
    -webkit-transition-duration: 0s !important;
    -webkit-transition-delay: 0s !important;
}

/* ============================================================
   KHỐI 6: Samsung-specific — nhận diện Samsung qua UA
   Áp dụng biện pháp triệt để hơn cho Samsung A series
   ============================================================ */

html[data-app="momo-app"][data-os="android"].samsung-device {
    /* Samsung WebView: force GPU composite trên html */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html[data-app="momo-app"][data-os="android"].samsung-device * {
    /* Samsung: tắt toàn bộ backdrop-filter */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* ============================================================
   KHỐI 7: Containment — gom scroll container vào 1 compositor layer
   contain: layout style paint giúp WebView không tạo compositor layer
   riêng cho từng child element khi scroll
   ============================================================ */

html[data-app="momo-app"][data-os="android"] .content-inner,
html[data-app="momo-app"][data-os="android"] #content-page {
    contain: layout style paint !important;
    -webkit-contain: layout style paint !important;
}

/* ============================================================
   KHỐI 8: Inline 100dvh fallback
   100dvh không được hỗ trợ trên WebView cũ → fallback 100%
   ============================================================ */

html[data-app="momo-app"][data-os="android"] [style*="100dvh"] {
    min-height: 100% !important;
    height: 100% !important;
}

html[data-app="momo-app"][data-os="android"] [style*="100vh"] {
    height: 100% !important;
}