/* =============================================
   MUA SẮM VUI - BASE
   CSS Variables · Reset · Layout Shell
   ============================================= */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');

/* ── CSS Custom Properties ── */
:root {
    --bg: #F0F2F8;
    --bg-card: #FFFFFF;
    --bg-input: #EEF1F7;
    --bg-nav: rgba(255,255,255,0.92);
    --accent: #4A6CF7;
    --accent-soft: rgba(74,108,247,0.10);
    --accent-light: #EEF1FF;
    --green: #10B981;
    --green-soft: rgba(16,185,129,0.10);
    --red: #EF4444;
    --red-soft: rgba(239,68,68,0.10);
    --orange: #F59E0B;
    --orange-soft: rgba(245,158,11,0.10);
    --purple: #7C3AED;
    --text: #0F172A;
    --text-secondary: #64748B;
    --text-muted: #94A3B8;
    --border: #E2E8F0;
    --border-light: #F1F5F9;
    --radius: 18px;
    --radius-sm: 14px;
    --radius-xs: 10px;
    --radius-pill: 100px;
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.04);
    --shadow-sm: 0 2px 8px rgba(15,23,42,0.06);
    --shadow: 0 4px 16px rgba(15,23,42,0.08);
    --shadow-lg: 0 12px 40px rgba(15,23,42,0.14);
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --tab-h: 64px;
    --header-h: 56px;
}

/* ── Reset ── */
*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box }
html, body {
    height: 100%;
    overflow: hidden;
    font-family: 'Nunito', -apple-system, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    font-size: 15px;
    line-height: 1.5;
}
#app { height: 100%; display: flex; flex-direction: column; background: var(--bg) }
::-webkit-scrollbar { width: 0; background: transparent }

/* ── Header ── */
.app-header {
    padding: calc(var(--safe-top) + 10px) 16px 10px;
    background: var(--bg-nav);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    min-height: var(--header-h);
}
.header-logo { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 900; color: var(--accent); letter-spacing: -0.3px }
.header-logo i { font-size: 20px }
.header-actions { display: flex; gap: 8px; align-items: center }
.header-btn { width: 38px; height: 38px; border-radius: var(--radius-xs); background: var(--bg-input); border: none; color: var(--text-secondary); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: all .2s }
.header-btn:active { transform: scale(.88); background: var(--border) }
.header-btn-help { width: 38px; height: 38px; padding: 0; background: linear-gradient(135deg, #4A6CF7, #6C8EFF); color: #fff; font-size: 17px; border-radius: 50%; text-decoration: none; box-shadow: 0 3px 10px rgba(74,108,247,0.35); animation: help-pulse 2.5s ease-in-out infinite }
.header-btn-help:active { transform: scale(.9); box-shadow: 0 1px 4px rgba(74,108,247,0.2) }
.notif-badge { position: absolute; top: -4px; right: -4px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 9px; display: none; align-items: center; justify-content: center; padding: 0 4px; border: 2px solid #fff; animation: notif-pop .2s ease }
.user-avatar-sm { width: 38px; height: 38px; border-radius: var(--radius-xs); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; background: var(--accent-soft); border: 2px solid var(--accent-light); transition: all .2s }
.user-avatar-sm:active { transform: scale(.88) }

/* ── Main content area ── */
.main-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 88px) }

/* ── Tab bar ── */
.tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--tab-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--bg-nav); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--border-light); display: flex; z-index: 100; box-shadow: 0 -4px 20px rgba(15,23,42,0.06) }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; transition: all .2s; color: var(--text-muted); text-decoration: none; position: relative; background: none; border: none; padding: 0; font-family: inherit }
.tab-item.active { color: var(--accent) }
.tab-item.active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 4px 4px; background: var(--accent) }
.tab-item i { font-size: 20px; transition: transform .2s }
.tab-item.active i { transform: translateY(-1px) }
.tab-item span { font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px }

/* ── Page modal (slide-in page) ── */
.page-modal { position: fixed; inset: 0; z-index: 150; background: var(--bg); transform: translateX(100%); transition: transform .32s cubic-bezier(.32,.72,0,1); overflow-y: auto; -webkit-overflow-scrolling: touch }
.page-modal.active { transform: translateX(0) }
.page-header { position: sticky; top: 0; z-index: 10; padding: calc(var(--safe-top) + 10px) 16px 10px; background: var(--bg-nav); backdrop-filter: blur(24px); display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--border-light); min-height: var(--header-h) }
.page-header-title { font-size: 16px; font-weight: 800; flex: 1 }
.back-btn { width: 36px; height: 36px; border-radius: var(--radius-xs); background: var(--bg-input); border: none; color: var(--text); font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s }
.back-btn:active { transform: scale(.88); background: var(--border) }

/* ── Section containers ── */
.card { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm) }
.section-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 10px }
.section-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 7px; letter-spacing: -0.2px }
.section-title i { color: var(--accent); font-size: 15px }
.section-more { font-size: 12.5px; color: var(--accent); cursor: pointer; font-weight: 700; padding: 4px 12px; background: var(--accent-soft); border-radius: var(--radius-pill); border: none; transition: all .2s; font-family: inherit }
.section-more:active { opacity: .7 }
.section-wrap { border-radius: var(--radius); margin: 6px 16px 0; padding: 0 0 14px; overflow: hidden }
.section-wrap.sec-sp { background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(99,102,241,0.08)) }
.section-wrap.sec-hot { background: linear-gradient(135deg, rgba(239,68,68,0.04), rgba(255,142,83,0.05)) }
.section-wrap.sec-tr { background: linear-gradient(135deg, rgba(245,158,11,0.04), rgba(249,115,22,0.05)) }
.section-wrap .section-header { padding: 13px 15px 9px }
.section-wrap .scroll-h, .section-wrap .grid-2 { padding: 0 15px }

/* ── Grid / Horizontal scroll helpers ── */
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; padding: 0 16px; align-items: stretch }
.scroll-h { display: flex; gap: 10px; overflow-x: auto; padding: 0 16px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; align-items: stretch }
.scroll-h::-webkit-scrollbar { display: none }
.scroll-h .deal-card { min-width: 172px; max-width: 172px; scroll-snap-align: start; flex-shrink: 0 }

/* ── Responsive – PC (≥ 480 px) ── */
@media (min-width: 480px) {

    /* Outer canvas */
    html, body { background: #CBD5E1; overflow: hidden }

    /* App shell – centred 480 px column */
    #app {
        max-width: 480px;
        margin: 0 auto;
        position: relative;
        box-shadow: 0 0 80px rgba(15,23,42,0.20);
    }

    /* Main scrollable area */
    .main-content { max-width: 480px; margin: 0 auto }

    /* Bottom tab bar */
    .tab-bar {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Page modals – slide within the 480 px column */
    .page-modal {
        left: 50%;
        right: auto;
        width: 480px;
        /* hidden: pushed 100 vw off to the right */
        transform: translateX(100vw);
    }
    .page-modal.active {
        transform: translateX(-50%);
    }

    /* Loading screen – centred column */
    #loading-screen {
        left: 50%;
        right: auto;
        width: 480px;
        transform: translateX(-50%);
    }

    /* FAB – keep it inside the right edge of the 480 px column */
    .fab {
        right: calc(50% - 222px); /* 480/2 - 18px margin */
    }

    /* Toast notifications – centred within 480 px column */
    .toast {
        left: calc(50% - 224px); /* (480px - 32px padding) / 2 */
        right: auto;
        width: 448px;
    }

    /* PWA install banner – same centring as toast */
    .pwa-banner {
        left: calc(50% - 224px);
        right: auto;
        width: 448px;
    }
}