/* Com11h.com — MOBILE <= 900px
   Logo cố định bên trái + menu vuốt ngang cùng hàng
   Hàng 2: tài khoản bên trái + giỏ hàng bên phải
*/
@media (max-width: 900px) {

    .topbar__inner {
        display: grid !important;

        /* CỘT 1 = đúng kích thước ô Logo
           CỘT 2 = phần còn lại cho menu */
        grid-template-columns: 50px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;

        align-items: center !important;
        column-gap: 0px !important;
        row-gap: 0px !important;

        width: 100%;
    }

    /* =========================
       LOGO
       ========================= */

    .mobileNavBrand {
        grid-column: 1 !important;
        grid-row: 1 !important;

        /* QUAN TRỌNG: không cho ô Logo stretch */
        align-self: center !important;
        justify-self: start !important;

        width: 100px !important;
        min-width: 100px !important;
        max-width: 100px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        flex: none !important;
    }

    .mobileNavBrand .logo {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100px !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        flex: 0 0 auto !important;
    }

    .mobileNavBrand .logo img {
        display: block !important;

        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =========================
       MENU TRANG CHỦ
       ========================= */

    .topbar__inner > .nav {
        grid-column: 2 !important;
        grid-row: 1 !important;

        min-width: 0 !important;
        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: block !important;
    }

    .nav__viewport {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        overflow-x: auto;
        overflow-y: hidden;

        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;

        overscroll-behavior-x: contain;
        touch-action: pan-x;
        cursor: grab;

        margin: 0 !important;
        padding: 0 !important;
    }

    .nav__viewport::-webkit-scrollbar {
        display: none;
    }

    .nav__track {
        display: flex;

        width: max-content;
        min-width: max-content;

        flex-wrap: nowrap;

        transform: none !important;
        animation: none !important;
    }

    .nav__set {
        display: flex;

        flex-wrap: nowrap;
        gap: 22px;

        padding-right: 22px;

        flex-shrink: 0;
        width: max-content;
    }

    .nav__set--dup {
        display: none !important;
    }

    .nav a {
        white-space: nowrap;
        flex-shrink: 0;
    }


    /* =========================
       HÀNG 2
       ========================= */

    .topbar__inner > .accountLink,
    .topbar__inner > .authLinks {
        grid-column: 1 !important;
        grid-row: 2 !important;

        min-width: 0;
    }

    .topbar__inner > .accountLink {
        justify-self: start;
        text-align: left;
    }

    .topbar__inner > .authLinks {
        display: inline-flex;

        align-items: center;
        justify-content: flex-start;

        gap: 6px;

        justify-self: start;

        white-space: nowrap;
    }

    .topbar__inner > .cartLink {
        grid-column: 2 !important;
        grid-row: 2 !important;

        justify-self: end;

        text-align: right;
        white-space: nowrap;
    }

    .topbar__inner > .langSwitch {
        display: none !important;
    }

    /* =========================
       BẢNG (Đơn hàng của tôi, Lịch sử mã dự thưởng...)
       -------------------------
       Các bảng dùng grid-template-columns cố định theo px nên rộng hơn màn
       hình điện thoại. Trước đây .table có overflow:hidden nên phần cột bị
       tràn ra ngoài bị CẮT MẤT, làm giao diện trông như thiếu thông tin.
       Giờ cho phép vuốt ngang để xem đầy đủ mọi cột, giống hệt trên web.
       ========================= */

    .table {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .tableRow {
        width: max-content;
        min-width: 100%;
    }

    .swipeHint {
        display: inline-flex;
    }
}

/* =========================
   THỰC ĐƠN HÔM NAY - CATEGORY NAV
   ========================= */
@media (max-width: 900px) {
    .categoryNav {
        margin: 10px -2px 16px;
        padding: 10px 8px 8px;
        border-radius: 16px;
    }
    .categoryNav__top { margin: 0 3px 7px; }
    .categoryNav__label { font-size: 12px; }
    .categoryNav__allBtn { font-size: 11px; }
    .categoryNav__viewport {
        padding: 2px 6px 5px;
        scroll-snap-type: x proximity;
    }
    .categoryChip {
        min-height: 36px;
        padding: 6px 11px;
        font-size: 12px;
        scroll-snap-align: start;
    }
    .categoryChip__icon { width: 18px; height: 18px; font-size: 13px; }
    .categoryNav__arrow,
    .categoryNav__fade { display: none; }
    .categoryModal { padding: 10px; align-items: flex-end; }
    .categoryModal__box {
        width: 100%;
        max-height: 86vh;
        border-radius: 22px 22px 14px 14px;
        padding: 16px;
    }
    .categoryModal__grid { grid-template-columns: 1fr; gap: 8px; }
    .categoryModal__head h3 { font-size: 20px; }
}