/* =====================================================================
   app.css - UI tối ưu: loading, skeleton, toast, chống dịch layout (CLS)
   Tách riêng để trình duyệt cache, tăng tốc tải trang.
   ===================================================================== */

/* Thanh tiến trình tải ở đỉnh trang (loading toàn cục, không gây dịch layout) */
#appProgress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 10000;
    background: linear-gradient(90deg, #fe0, #ff6a00);
    transition: width .3s ease, opacity .4s ease;
    opacity: 0;
    pointer-events: none;
}

    #appProgress.active {
        opacity: 1;
    }

/* Nút đang xử lý: ẩn chữ, hiện spinner */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

    .btn-loading::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border: 2px solid rgba(0,0,0,.25);
        border-top-color: #333;
        border-radius: 50%;
        animation: app-spin .6s linear infinite;
    }

@keyframes app-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Khung ảnh giữ tỷ lệ cố định -> chống layout shift (CLS) khi ảnh tải xong */
.media-box {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f6f7f9;
}

    .media-box > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.media-box--banner {
    aspect-ratio: 16 / 6;
}

.media-box--post {
    aspect-ratio: 4 / 3;
}

/* Biến thể hiển thị trọn ảnh (không cắt) - dùng cho ảnh chi tiết sản phẩm */
.media-box.contain > img {
    object-fit: contain;
}

/* Ảnh thiếu/lỗi đã được app.js thay bằng icon lá (data-URI).
   contain + nền cùng màu icon để không bị kéo méo hay cắt xén ở khung chữ nhật */
img.img-fallback {
    object-fit: contain !important;
    background: #f2f4f3;
}

/* Skeleton nhấp nháy trong lúc chờ dữ liệu */
.skel {
    position: relative;
    overflow: hidden;
    background: #eceff1;
    border-radius: 8px;
}

    .skel::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
        animation: skel-shimmer 1.2s infinite;
    }

@keyframes skel-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skel-card {
    padding: 8px;
}

    .skel-card .skel-img {
        aspect-ratio: 1 / 1;
        margin-bottom: 8px;
    }

.skel-line {
    height: 12px;
    margin: 6px 0;
    border-radius: 6px;
}

    .skel-line.w-60 {
        width: 60%;
    }

    .skel-line.w-40 {
        width: 40%;
    }

/* Toast dự phòng khi không có SweetAlert */
#appToastWrap {
    position: fixed;
    z-index: 10001;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.app-toast {
    min-width: 220px;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #fff;
    background: #323232;
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
    font-size: 14px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s;
}

    .app-toast.show {
        opacity: 1;
        transform: translateY(0);
    }

    .app-toast.success {
        background: #2e7d32;
    }

    .app-toast.error {
        background: #c62828;
    }

    .app-toast .app-toast-title {
        font-weight: 700;
        display: block;
        margin-bottom: 2px;
    }

/* =====================================================================
   Thanh điều hướng đáy trên mobile
   ---------------------------------------------------------------------
   #menu-right-account nằm ở header (desktop). Trên mobile nó chuyển
   thành thanh bám đáy: Gọi / Mua nhanh / Mua sỉ / Giỏ hàng.

   Đặt ở app.css vì file này chặn render; nếu để ở site.min.css (nạp
   async) thanh sẽ hiện ở header rồi mới nhảy xuống đáy khi CSS về.

   Các trang danh sách đã có thanh .menu-product bám đáy riêng, nên
   dùng :not(:has()) để chỉ dựng thanh này ở những trang không có nó —
   tránh hai thanh chồng nhau. Trình duyệt không hiểu :has() sẽ giữ
   nguyên menu ở header, không vỡ layout.
   ===================================================================== */

/* Mặc định (desktop): ẩn các mục chỉ dành cho mobile */
#menu-right-account .hl-call,
#menu-right-account .call-sheet,
#menu-right-account .li-buy-fast,
#menu-right-account .li-buy-si {
    display: none;
}

@media only screen and (max-width: 600px) {
    body:not(:has(.menu-product)) #menu-right-account {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: flex;
        align-items: stretch;
        margin: 0;
        padding: 0;
        background: #fff;
        border-top: 1px solid #e8e8e8;
        box-shadow: 0 -2px 10px rgba(0,0,0,.1);
        padding-bottom: env(safe-area-inset-bottom);
    }

        body:not(:has(.menu-product)) #menu-right-account > li {
            flex: 1 1 0;
            min-width: 0;
            display: block;
            width: auto;
        }

            body:not(:has(.menu-product)) #menu-right-account > li > a,
            body:not(:has(.menu-product)) #menu-right-account .hl-call {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                padding: 7px 2px 6px;
                color: #333;
                font-size: 11px;
                line-height: 1.15;
                text-align: center;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }

                /* <br /> trong markup chỉ để xuống dòng ở desktop */
                body:not(:has(.menu-product)) #menu-right-account > li > a br {
                    display: none;
                }

                body:not(:has(.menu-product)) #menu-right-account > li > a > svg,
                body:not(:has(.menu-product)) #menu-right-account .hl-call > svg {
                    width: 20px;
                    height: 20px;
                    flex: 0 0 auto;
                }

        /* Chỉ có ở desktop */
        body:not(:has(.menu-product)) #menu-right-account .li-viewed,
        body:not(:has(.menu-product)) #menu-right-account .li-fav {
            display: none;
        }

        /* Chỉ có ở mobile */
        body:not(:has(.menu-product)) #menu-right-account .li-buy-fast,
        body:not(:has(.menu-product)) #menu-right-account .li-buy-si {
            display: block;
        }

            body:not(:has(.menu-product)) #menu-right-account .li-buy-si > a {
                color: #e07800;
            }

        /* Hotline: dải xanh nguyên hàng -> ô "Gọi" hiện số, bấm là quay số.
           order:-1 vì trong DOM hotline nằm sau Giỏ hàng (thứ tự header desktop)
           nhưng ở thanh đáy mobile vẫn muốn "Gọi" đứng đầu. */
        body:not(:has(.menu-product)) #menu-right-account li.li-hotline {
            display: block;
            width: auto;
            order: -1;
        }

            body:not(:has(.menu-product)) #menu-right-account li.li-hotline .header-hotline {
                display: none;
            }

        body:not(:has(.menu-product)) #menu-right-account .hl-call {
            display: flex;
            width: 100%;
            border: 0;
            background: transparent;
            color: #11b22d;
            font-weight: 700;
            cursor: pointer;
        }

        body:not(:has(.menu-product)) #menu-right-account .hl-call-num {
            font-size: 11px;
        }

        /* Bảng chọn số gọi: bung lên phía trên thanh đáy khi bấm "Gọi" */
        body:not(:has(.menu-product)) #menu-right-account .call-sheet.active {
            display: block;
            position: fixed;
            left: 10px;
            bottom: calc(64px + env(safe-area-inset-bottom));
            z-index: 1001;
            min-width: 220px;
            padding: 6px;
            border-radius: 14px;
            background: #fff;
            box-shadow: 0 6px 28px rgba(0, 0, 0, .22);
        }

            body:not(:has(.menu-product)) #menu-right-account .call-sheet.active a {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 14px;
                border-radius: 10px;
                color: #11b22d;
                font-size: 15px;
                font-weight: 700;
                text-decoration: none;
                white-space: nowrap;
            }

                body:not(:has(.menu-product)) #menu-right-account .call-sheet.active a:active {
                    background: #eafaee;
                }

                body:not(:has(.menu-product)) #menu-right-account .call-sheet.active a + a {
                    border-top: 1px solid #f0f1f3;
                }

    /* Chừa chỗ để thanh đáy không che nội dung cuối trang */
    body:not(:has(.menu-product)) {
        padding-bottom: 60px;
    }

    /* Đã có thanh đáy rồi thì bỏ 2 nút vàng bám phải cho đỡ rối */
    .mua-nhanh,
    .mua-nhanh-1 {
        display: none;
    }
}