/* ═══════════════════════════════════════════════════════════════
   MOBILE UI V2 — điện thoại ≤768px (2026-10-26)
   Đề xuất: claude.ai/artifact/AYuTznXusq5yMH4hLtuvRC · quyết định D-UI-1..7 đã chốt.
   - Màu: navy #0F2A5F (thương hiệu) + cam #D4430C (hành động, giá); đỏ chỉ cho % giảm.
   - Nạp sau main.css + màu toàn cục. View/header in <style> trong <body> (đến sau file này)
     nên mọi selector có tiền tố `body` để thắng cùng độ ưu tiên.
   - Desktop (>768px) không đổi. Khôi phục: backups/mobile-ui-p2-*.rollback.sh
   ═══════════════════════════════════════════════════════════════ */

/* Markup chỉ dành cho điện thoại — ẩn ở mọi cỡ màn hình khác */
.hm-mcats, .hm-flash-mhead, .hm-pcard-disc-ov { display: none; }

@media (max-width: 768px) {
  :root {
    --v2-navy: #0F2A5F;
    --v2-navy-2: #173B7E;
    --v2-orange: #D4430C;
    --v2-orange-on-dark: #FF8A3D;
    --v2-orange-tint: #FFF1E8;
    --v2-red: #D92D20;
    --v2-ink: #1B2333;
    --v2-muted: #6B7280;
    --v2-line: #E7E2D9;
    --v2-soft: #F3F0EA;
    --v2-bg-alt: #F7F5F1;
  }

  /* ── Header ───────────────────────────────────────────────── */
  body #vlh .vela-mob-call,
  body #vlh .vela-mob-cart,
  body #vlh .vela-mob-ham { color: var(--v2-navy) !important; }
  body #vlh .vela-mob-call { border-color: var(--v2-line); }
  body #vlh .vela-search-form {
    height: 44px !important; border-radius: 12px !important;
    background: var(--v2-soft); border: 1px solid transparent;
  }
  body #vlh .vela-search-form:focus-within { border-color: var(--v2-navy); background: #fff; }
  body #vlh .vela-search-icon { width: 40px !important; color: var(--v2-muted); }
  body #vlh .vela-search-form input[type=search] { font-size: 14px !important; padding: 0 12px 0 0 !important; }
  body #vlh .vela-search-form input[type=search]::placeholder { color: var(--v2-muted); }
  /* Enter / nút "Tìm" trên bàn phím vẫn gửi form; bỏ nút vuông navy cho gọn (W10) */
  body #vlh .vela-search-submit { display: none !important; }
  /* Vạch xanh–vàng dưới header → đường kẻ mảnh trung tính */
  body #vlh::after { height: 1px; background: var(--v2-line); }

  /* ── Banner gọn (W1) ──────────────────────────────────────── */
  body .hm-hero-section { background: #fff; padding: 4px 16px 0; }
  /* Lớp hạt (velamart-tech-particles.js) gắn vào .hm-hero với border-radius:inherit → bo góc ở .hm-hero.
     overflow:hidden an toàn trên điện thoại vì sidebar flyout đã ẩn. */
  body .hm-hero { overflow: hidden; }
  /* main.css §2 ép góc dưới = 0 bằng `#main .hm-hero… !important` → cần selector mạnh hơn */
  body #main .hm-hero, body #main .hm-hero-banner, body .hm-home-shell .hm-hero-banner { border-radius: 18px !important; }
  body .hm-hero-banner {
    min-height: 0; padding: 20px 18px; gap: 0;
    flex-direction: column; align-items: flex-start; text-align: left;
    background: linear-gradient(135deg, var(--v2-navy) 0%, var(--v2-navy-2) 100%);
  }
  body .hm-hero-banner::after { display: none; }
  body .hm-hero-text { text-align: left; }
  body .hm-hero-badge {
    background: none; color: var(--v2-orange-on-dark); padding: 0; margin-bottom: 6px;
    font-size: 10.5px; letter-spacing: .1em; border-radius: 0;
  }
  body .hm-hero-text h1 { font-size: 1.2rem; line-height: 1.3; margin: 0 0 14px; }
  body .hm-hero-text h1 em { color: var(--v2-orange-on-dark); }
  body .hm-hero-sub,
  body .hm-btn-outline,
  body .hm-hero-visual { display: none; }
  body .hm-btn-primary {
    display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
    background: var(--v2-orange); color: #fff; border-radius: 10px; font-size: 13px;
  }
  body .hm-btn-primary:hover { background: #BC3B0A; }

  /* ── Hàng danh mục cuộn ngang ─────────────────────────────── */
  body .hm-mcats {
    display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: 16px;
    margin: 0 -16px; padding: 14px 16px 6px;
  }
  body .hm-mcats::-webkit-scrollbar { display: none; }
  body .hm-mcat {
    flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-align: center; text-decoration: none; color: var(--v2-ink); scroll-snap-align: start;
  }
  body .hm-mcat-img {
    width: 56px; height: 56px; border-radius: 16px; background: var(--v2-soft);
    overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--v2-navy);
  }
  body .hm-mcat-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; display: block; }
  body .hm-mcat-img svg { width: 24px; height: 24px; }
  body .hm-mcat-name {
    font-size: 11px; line-height: 1.3; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Khối "Danh mục sản phẩm" cũ trùng với hàng trên (W7) */
  body .hm-sec-cats { display: none; }

  /* ── Ưu đãi nổi bật: nền trắng, không gradient (W2, D-UI-5) ── */
  body .hm-flash-outer { margin-top: 6px; padding: 0; }
  body .hm-flash-titlebar,
  body .hm-flash-time,
  body .hm-flash-footer,
  body .hm-fsl-btn { display: none; }
  body .hm-flash-frame { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  body .hm-flash-box { background: #fff; border-radius: 0; padding: 10px 0 8px; overflow: visible; }
  body .hm-flash-box::before { display: none; }
  body .hm-flash-meta { flex-direction: row; margin: 0 0 10px; padding: 0 16px; }
  body .hm-flash-mhead {
    display: flex; align-items: center; gap: 6px; margin: 0;
    font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--v2-ink);
  }
  body .hm-flash-mhead svg { width: 18px; height: 18px; fill: var(--v2-orange); flex-shrink: 0; }
  body .hm-flash-track { gap: 10px; padding: 0 16px 4px; scroll-padding-left: 16px; }
  body .hm-flash-track > .hm-pcard { flex: 0 0 44%; }
  body .hm-flash-box .hm-pcard { height: auto; border: 1px solid var(--v2-line); box-shadow: none; border-radius: 14px; }
  body .hm-flash-box .hm-pcard-img-wrap,
  body .hm-flash-box .hm-pcard-img { background: #fff; }

  /* ── Mục sản phẩm theo danh mục: 6 sp, cuộn ngang (W12) ───── */
  body .hm-wrap { padding: 0 16px; }
  body .hm-sec { padding: 16px 0; }
  body .hm-sec-alt { background: var(--v2-bg-alt); }
  body .hm-sec-head { margin-bottom: 10px; }
  body .hm-sec-title {
    font-size: 18px; font-weight: 800; color: var(--v2-ink); white-space: normal;
    padding: 0 0 0 11px; line-height: 1.3;
  }
  body .hm-sec-title::before,
  body #hm-news-sec .hm-sec-title::before {
    left: 0; top: 50%; bottom: auto; width: 3px; height: 16px; margin-top: -8px;
    border-radius: 2px; background: var(--v2-orange);
  }
  body .hm-sec-more,
  body #hm-news-sec .hm-sec-more {
    height: auto; padding: 4px 0; border: 0; background: none; box-shadow: none;
    color: var(--v2-orange); font-size: 13px; font-weight: 600;
  }
  body .hm-sec-more:hover,
  body #hm-news-sec .hm-sec-more:hover { background: none; color: #BC3B0A; }
  body .hm-sec .hm-prod-grid.hm-prod-rail {
    display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: 16px;
    margin: 0 -16px; padding: 0 16px 4px; align-items: stretch;
  }
  body .hm-prod-rail::-webkit-scrollbar { display: none; }
  body .hm-sec .hm-prod-grid.hm-prod-rail > .hm-pcard:nth-child(-n+6) { display: flex; flex: 0 0 44%; scroll-snap-align: start; }
  body .hm-sec .hm-prod-grid.hm-prod-rail > .hm-pcard:nth-child(n+7) { display: none; }

  /* Cam kết đã có ở footer (W7) */
  body .hm-trust { display: none; }

  /* ── Thẻ sản phẩm (mọi trang danh sách, W3) ──────────────── */
  body .hm-pcard { border-radius: 14px; border: 1px solid var(--v2-line); box-shadow: none; }
  body .hm-pcard:hover { transform: none; box-shadow: none; }
  body .hm-pcard:hover .hm-pcard-img { transform: none; }
  body .hm-pcard-img-wrap a { border-radius: 14px 14px 0 0; background: #fff; }
  body .hm-pcard-badges { display: none; }
  body .hm-pcard-disc-ov {
    display: inline-block; position: absolute; top: 8px; left: 8px; z-index: 2;
    background: var(--v2-red); color: #fff; border-radius: 6px; padding: 4px 6px;
    font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  }
  body .hm-pcard-quick-btn { width: 32px; height: 32px; color: var(--v2-navy); border-color: rgba(15,42,95,.12); }
  body .hm-pcard-quick-btn svg { width: 16px; height: 16px; }
  /* So sánh chỉ giữ ở trang danh mục / tìm kiếm */
  body .hm-prod-rail .hm-pcard-compare-btn,
  body .hm-flash-track .hm-pcard-compare-btn { display: none; }
  body .hm-pcard-body { padding: 10px 10px 12px; }
  body .hm-pcard-name {
    font-size: 14px; font-weight: 500; line-height: 1.35; height: 2.7em;
    color: var(--v2-ink); margin: 0 0 6px;
  }
  body .hm-pcard-price-row { padding-right: 44px; min-height: 38px; justify-content: flex-end; }
  body .hm-pcard-prices .hm-price-sale {
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.2;
    color: var(--v2-orange); font-variant-numeric: tabular-nums;
  }
  body .hm-pcard-prices .hm-price-contact { font-size: 14px; color: var(--v2-navy); font-weight: 600; }
  body .hm-pcard-bottom-row { min-height: 16px; }
  body .hm-pcard-bottom-row .hm-price-orig { font-size: 12px; color: var(--v2-muted); opacity: 1; margin: 0; }
  body .hm-pcard-disc-pill { display: none; }
  /* Một nút giỏ; "Mua ngay" ở trang chi tiết. Định vị theo .hm-pcard (position:relative) — thân thẻ
     không được position:relative vì nút tim (.hm-pcard-quick-actions) cũng nằm trong thân thẻ. */
  body .hm-pcard-actions { position: absolute; right: 10px; bottom: 12px; margin: 0; gap: 0; }
  body .hm-pcard-actions form:not(.hm-pcard-atc-form) { display: none; }
  body .hm-pcard-actions .hm-pcard-atc-form { flex: 0 0 36px; width: 36px; }
  body .hm-pcard-atc-btn {
    width: 36px; height: 36px; border-radius: 10px; margin: 0;
    background: var(--v2-orange-tint); color: var(--v2-orange);
  }
  body .hm-pcard-atc-btn svg { width: 18px; height: 18px; color: var(--v2-orange); }
  body .hm-pcard-atc-btn:hover { filter: none; transform: none; background: #FFE2CF; }

  /* ── Thanh điều hướng dưới: một kiểu cho mọi tab (W11) ────── */
  body .vbn a { color: var(--v2-muted); font-weight: 500; font-size: 11px; }
  body .vbn a.on { color: var(--v2-orange); font-weight: 700; }
  body .vbn a.on::before {
    top: 5px; left: 50%; right: auto; width: 52px; height: 28px; margin-left: -26px;
    border-radius: 999px; background: var(--v2-orange-tint); z-index: -1;
  }
  body .vbn a.vbn-chat { color: var(--v2-muted); }
  body .vbn .vbn-chat .vbn-ic::before { display: none; }
  body .vbn .vbn-chat svg,
  body .vbn .vbn-chat .vbn-dot { animation: none !important; }

  /* /shop: kiểu điện thoại nằm trong shop.css (tệp riêng của trang). */

  /* ── Trang danh mục (products/category.php) — bản mềm, đồng bộ /shop ──────
     Style của trang nằm trong <style> của view + main.css (Category Tabs) → tiền tố body.
     Giữ nguyên cấu trúc chip 2×2 trượt + chấm (có JS riêng), chỉ đổi màu/viền/bo góc. */
  body .cat-bc { font-size: 12px; color: var(--v2-muted); margin: 6px 0 10px; }
  body .cat-bc a { color: var(--v2-muted); }
  body .cat-bc-sep { color: #CFC8BD; }

  body .vl-hero2 { border-radius: 20px; margin-bottom: 12px; box-shadow: 0 10px 28px -18px rgba(27,35,51,.35); }
  body .vl-h2-panel { padding: 20px 18px; background: linear-gradient(135deg, var(--v2-navy) 0%, var(--v2-navy-2) 100%); }
  body .vl-h2-label { color: var(--v2-orange-on-dark); margin-bottom: 8px; letter-spacing: .1em; }
  body .vl-h2-label::before { background: var(--v2-orange-on-dark); }
  body .vl-h2-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
  body .vl-h2-desc { font-size: 13px; line-height: 1.55; margin-bottom: 16px; -webkit-line-clamp: 2; }
  body .vl-h2-btn-primary,
  body .vl-h2-btn-secondary { height: 38px; min-height: 38px; border-radius: 999px; }
  body .vl-h2-btn-primary { background: var(--v2-orange); color: #fff; box-shadow: none; }
  body .vl-h2-btn-primary:hover { background: #BC3B0A; color: #fff; box-shadow: none; transform: none; }

  body .cat-mobile-slider { border-radius: 16px; margin-bottom: 4px; }
  /* Danh mục chưa có ảnh banner: slider chỉ là nền gradient + tên (trùng hero ngay trên) → ẩn */
  body .cat-mobile-slider:not(:has(img)) { display: none; }

  body .cat-child-chip {
    border: 0; background: var(--v2-soft); color: var(--v2-ink);
    font-size: 12.5px; font-weight: 500; box-shadow: none;
  }
  body .cat-child-chip__icon { stroke: var(--v2-orange); }
  body .cat-child-chip:hover { background: var(--v2-orange-tint); color: var(--v2-orange); border: 0; transform: none; box-shadow: none; }
  body .cat-child-chip.active,
  body .cat-child-chip.active:hover {
    background: var(--v2-orange-tint); color: var(--v2-orange); border: 0; font-weight: 600;
    box-shadow: none; animation: none;
  }
  body .cat-tabnav-dots .cat-tabnav-dot.active { background: var(--v2-orange); }

  body .cat-commit { border-color: var(--v2-line); border-radius: 16px; }
  body .cat-commit .cat-commit-item { border-color: #F1ECE4; }
  body .cat-commit-icon { background: var(--v2-orange-tint); border-radius: 8px; }
  body .cat-commit-icon svg { stroke: var(--v2-orange); }
  body .cat-commit-text strong { color: var(--v2-ink); font-weight: 600; }

  body .cat-filter-bar { background: none; border: 0; padding: 0; gap: 8px; margin: 4px 0 10px; }
  body .cat-filter-select {
    height: 40px; padding: 0 26px 0 14px; border: 1px solid var(--v2-line); border-radius: 999px;
    background-color: #fff; color: var(--v2-ink);
  }
  body .cat-filter-select:hover,
  body .cat-filter-select:focus { border-color: var(--v2-navy); }
  body .cat-filter-reset {
    height: 40px; border: 0; border-radius: 999px; background: var(--v2-soft); color: var(--v2-ink);
    font-size: 13px; font-weight: 500; text-decoration: none; text-transform: none; letter-spacing: 0;
  }
  body .cat-filter-reset:hover { color: var(--v2-orange); }
  body .cat-bar { font-size: 12.5px; color: var(--v2-muted); margin: 0 0 10px; }
  body .cat-bar strong { color: var(--v2-ink); }

  body .cat-loadmore-btn {
    width: auto; min-width: 200px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px;
    background: var(--v2-orange-tint); color: var(--v2-orange);
    font-size: 13.5px; font-weight: 600; letter-spacing: 0; box-shadow: none;
  }
  body .cat-loadmore-btn:hover { background: #FFE2CF; color: var(--v2-orange); transform: none; box-shadow: none; }
  /* "XEM THÊM SẢN PHẨM" viết hoa sẵn trong view → hiển thị dạng câu */
  body .cat-lm-text { display: inline-block; text-transform: lowercase; }
  body .cat-lm-text::first-letter { text-transform: uppercase; }

  body .category-seo-content {
    padding: 20px 18px; background: #fff; border-color: var(--v2-line); border-radius: 20px;
    box-shadow: 0 10px 28px -20px rgba(27,35,51,.25); font-size: 15px; line-height: 1.75;
  }
  body .category-seo-content h2 { font-size: 19px; color: var(--v2-ink); }
  body .category-seo-content strong { color: var(--v2-ink); }
  body .category-seo-content a { color: var(--v2-orange); }
  body .category-seo-content img { border-radius: 14px; }
  body .category-seo-content blockquote { border-left-color: var(--v2-orange); background: var(--v2-orange-tint); }
  body .btn-seo-toggle { border: 0; background: var(--v2-orange-tint); color: var(--v2-orange); }
  body .btn-seo-toggle:hover { background: #FFE2CF; color: var(--v2-orange); }
  body .cat-relpost-card { border-color: var(--v2-line); border-radius: 16px; }
  body .cat-relpost-more { color: var(--v2-orange); }
}