/*
 * Giao diện kiểu Shopee (2026-11). Nạp SAU theme-adayroi.css nên ghi đè được.
 * Màu cam Shopee cố định (không theo màu chính trong Admin); bỏ file này khỏi master.blade.php để quay về giao diện cũ.
 */
:root {
    --sp-orange: #ee4d2d;
    --sp-orange-rgb: 238, 77, 45;
    --sp-grad: linear-gradient(-180deg, #f53d2d, #f63);
    --sp-text: rgba(0, 0, 0, .87);
    --sp-text-2: rgba(0, 0, 0, .54);
    --sp-line: rgba(0, 0, 0, .09);
    --sp-bg: #f5f5f5;

    /* Màu chính + token của theme-adayroi → tông Shopee (!important để thắng cả màu đặt từ Admin) */
    --color-primary: #ee4d2d !important;
    --color-primary-rgb: 238, 77, 45 !important;
    --menu-background: #fff !important;
    --font-default: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ad-bg: #f5f5f5;
    --ad-ink: rgba(0, 0, 0, .87);
    --ad-ink-2: rgba(0, 0, 0, .8);
    --ad-muted: rgba(0, 0, 0, .54);
    --ad-line: rgba(0, 0, 0, .09);
    --ad-sale: #ee4d2d;
    --ad-navy: #ee4d2d;
    --ad-radius: 4px;
    --ad-radius-sm: 2px;
    --ad-shadow-sm: 0 1px 1px rgba(0, 0, 0, .05);
    --ad-shadow: 0 1px 20px rgba(0, 0, 0, .05);
}

body { background: var(--sp-bg); color: var(--sp-text); font-family: var(--font-default); font-size: 14px; }
h1, h2, h3, h4, h5, h6, .title { font-family: var(--font-default); letter-spacing: 0; }

/* ================= HEADER ================= */
.header { background: var(--sp-grad); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.headerTopbar { background: transparent !important; border: 0 !important; }
.headerTopbar-wrapper { min-height: 34px; }
.headerTopbar, .headerTopbar a, .headerTopbar span, .headerTopbar li { color: #fff !important; font-size: 13px; font-weight: 300; }
.headerTopbar a:hover { color: rgba(255, 255, 255, .7) !important; }
.headerTopbar .header-right .list-item li + li { border-left: 1px solid rgba(255, 255, 255, .4); padding-left: 10px; margin-left: 10px; }
.headerTopbar .dropdown-item, .headerTopbar .dropdown-item a, .headerTopbar .dropdown-item li { color: var(--sp-text) !important; font-weight: 400; }

.headerMiddle { background: transparent !important; padding: 14px 0 18px; }
.headerMiddle-wrapper { gap: 32px; }
.headerMiddle .header-logo img { filter: brightness(0) invert(1); max-height: 50px; width: auto; }

.headerMiddle .search-form { flex: 1 1 auto; max-width: 840px; }
.headerMiddle .search-form .input-group {
    background: #fff !important; border: 0 !important; border-radius: 2px !important; padding: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .09); overflow: hidden;
}
.headerMiddle .search-form .input-group:focus-within { box-shadow: 0 2px 4px rgba(0, 0, 0, .09), 0 0 0 2px rgba(255, 255, 255, .5); }
.headerMiddle .search-form .form-control { height: 40px; padding-left: 10px; font-size: 14px; background: #fff; color: var(--sp-text); }
.headerMiddle .search-form .input-group button {
    margin: 0; width: 60px; height: 34px; align-self: center; border-radius: 2px !important;
    background: #fb5533 !important; color: #fff !important; border: 0; font-size: 18px;
}
.headerMiddle .search-form .input-group button:hover { background: #f05d40 !important; }
.headerMiddle .search-form .input-group button i, .headerMiddle .search-form .input-group button svg { color: #fff !important; fill: #fff; }

.headerMiddle .header-action .action-list,
.headerMiddle .header-action .action-list .icon,
.headerMiddle .header-action .action-list .icon i,
.headerMiddle .header-action .action-list .content,
.headerMiddle .header-action .action-list .content * { color: #fff !important; }
.headerMiddle .header-action .action-list .icon svg path { fill: #fff; }
.headerMiddle .header-action .action-list .icon { font-size: 26px; background: transparent !important; border: 0 !important; width: auto !important; height: auto !important; }
.headerMiddle .header-action .action-list .icon svg { width: 24px; height: 24px; }
.headerMiddle .header-action .action-list .icon span,
.headerMiddle .header-action .action-list .icon .count {
    background: #fff !important; color: var(--sp-orange) !important; border: 2px solid var(--sp-orange); font-weight: 500;
}

/* Thanh menu: nền trắng mảnh, chữ đậm, hover cam */
.headerBottom { background: #fff !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .05) !important; }
.headerBottom-wrapper { min-height: 48px; }
.headerBottom .header-menu { flex: 1 1 auto; display: flex; align-items: center; gap: 28px; }
.headerBottom .main-menu { flex-wrap: nowrap !important; white-space: nowrap; gap: 24px; margin: 0; }
.headerBottom .main-menu > li { padding: 0 !important; margin: 0 !important; }
.headerBottom .category-header { background: var(--sp-orange) !important; color: #fff !important; border-radius: 2px; height: 38px !important; padding: 0 16px !important; white-space: nowrap; }
.headerBottom .header-btn a, .headerBottom .header-btn .btn { height: 36px; padding: 0 14px !important; display: inline-flex; align-items: center; white-space: nowrap; }
.headerBottom .category-header * { color: #fff !important; }
.headerBottom .main-menu > li > a,
.headerBottom .header-menu a { color: var(--sp-text) !important; font-weight: 500 !important; }
.headerBottom .main-menu > li > a:hover,
.headerBottom .main-menu > li.active > a,
.headerBottom .main-menu > li > a.router-link-exact-active { color: var(--sp-orange) !important; }
.headerBottom .header-btn a, .headerBottom .header-btn .btn {
    background: #fff !important; color: var(--sp-orange) !important; border: 1px solid var(--sp-orange) !important; border-radius: 2px !important; box-shadow: none !important;
}
.headerBottom .header-btn a *, .headerBottom .header-btn .btn * { color: var(--sp-orange) !important; }

/* ---------- Header: tinh chỉnh (2026-11-15) ---------- */
/* Topbar: một vạch ngăn duy nhất, chữ nhẹ, hotline nổi */
.headerTopbar-wrapper { min-height: 36px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.headerTopbar-wrapper .list-item { gap: 0 !important; }
.headerTopbar-wrapper .list-item li::after { display: none !important; }
.headerTopbar .header-right .list-item li + li { border-left: 1px solid rgba(255, 255, 255, .32); padding-left: 14px; margin-left: 14px; }
.headerTopbar .list-item li, .headerTopbar .list-item a, .headerTopbar .header-left a, .headerTopbar .header-left span { font-weight: 400; }
.headerTopbar .header-left { gap: 18px; align-items: center; }
.headerTopbar .play-items { display: flex; align-items: center; gap: 10px; }
.headerTopbar .play-items span::first-letter { text-transform: uppercase; }
.headerTopbar .play-items a { font-size: 16px; line-height: 1; }
.headerTopbar .hotline-item i { font-size: 15px; }
.headerTopbar .hotline-item a { font-weight: 600 !important; letter-spacing: .02em; }

/* Ô tìm kiếm: bo nhẹ, nút cam cao bằng ô */
.headerMiddle { padding: 16px 0 20px; }
.headerMiddle-wrapper { gap: 40px; align-items: center; }
.headerMiddle .search-form .input-group { border-radius: 4px !important; padding: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.headerMiddle .search-form .form-control { height: 40px; padding-left: 14px; }
.headerMiddle .search-form .form-control::placeholder { color: rgba(0, 0, 0, .4); }
.headerMiddle .search-form .input-group button { width: 64px; height: 40px; border-radius: 3px !important; }

/* Cụm yêu thích / giỏ hàng / tài khoản: icon + nhãn nhỏ + giá trị đậm */
.headerMiddle .header-action { gap: 6px !important; align-items: center; }
.headerMiddle .header-action .action-list {
    min-width: 0 !important; width: auto !important; gap: 10px; padding: 6px 10px; border-radius: 8px; transition: background .2s;
}
.headerMiddle .header-action .action-list:hover { background: rgba(255, 255, 255, .14); }
.headerMiddle .header-action .action-list:hover .icon { background: transparent !important; }
.headerMiddle .header-action .action-list .icon { position: relative; }
.headerMiddle .header-action .action-list .icon svg { width: 26px; height: 26px; }
.headerMiddle .header-action .action-list .icon .count {
    top: -8px; right: -10px; min-width: 20px; width: auto; height: 20px; padding: 0 5px; border-radius: 10px;
    font-size: 11px; line-height: 16px; border-width: 2px; font-weight: 600;
}
.headerMiddle .header-action .action-list .content {
    display: flex; flex-direction: column; gap: 2px; font-size: 12px !important; font-weight: 400 !important; line-height: 16px !important; letter-spacing: 0 !important;
}
.headerMiddle .header-action .action-list .content small { font-size: 12px; opacity: .85; white-space: nowrap; }
.headerMiddle .header-action .action-list .content span { font-size: 15px !important; font-weight: 600 !important; line-height: 20px; margin: 0 !important; white-space: nowrap; }
.headerMiddle .userHeader .action-list .thumb {
    width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: 0 0 38px; border: 2px solid rgba(255, 255, 255, .85); background: #fff;
}
.headerMiddle .userHeader .action-list .thumb img { width: 100%; height: 100%; object-fit: cover; }
.headerMiddle .userHeader .action-list .content .user-name { font-size: 14px; font-weight: 600; line-height: 18px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.headerMiddle .userHeader .action-list .content .user-sub { display: inline-flex !important; align-items: center; gap: 2px; font-size: 12px !important; font-weight: 400 !important; opacity: .85; line-height: 16px; }
@media (max-width: 991.98px) {
    .headerMiddle .header-action .action-list .content { display: none !important; }
    .headerMiddle .header-action .action-list { padding: 6px; }
}

/* Thanh menu: gạch chân cam ở đáy thay vì mép trên */
.headerBottom { border-bottom: 1px solid rgba(0, 0, 0, .06); }
.headerBottom .category-header { height: 40px !important; border-radius: 4px; gap: 10px; font-weight: 600; box-shadow: 0 2px 6px rgba(var(--sp-orange-rgb), .3); }
.header-menu .main-menu li a::before { top: auto !important; bottom: 0; height: 2px !important; border-radius: 2px; }
.headerBottom .main-menu > li > span > a.active,
.headerBottom .main-menu > li > a.active { color: var(--sp-orange) !important; }
.headerBottom .header-btn a, .headerBottom .header-btn .btn {
    height: 40px; gap: 6px; border-radius: 4px !important; font-weight: 600;
    background: rgba(var(--sp-orange-rgb), .08) !important; border-color: rgba(var(--sp-orange-rgb), .45) !important; transition: background .2s, color .2s;
}
.headerBottom .header-btn a:hover, .headerBottom .header-btn .btn:hover { background: var(--sp-orange) !important; color: #fff !important; }
.headerBottom .header-btn a:hover *, .headerBottom .header-btn .btn:hover * { color: #fff !important; }
.headerBottom .header-btn i { font-size: 17px; }

/* ================= HERO ================= */
.banner-section { padding-top: 20px; }
.banner__card, .hero-text, .heroAds-single { border-radius: 2px !important; box-shadow: none !important; }
.hero-text::before { border-radius: 0; }
.hero-content .subtitle { background: rgba(var(--sp-orange-rgb), .1) !important; color: var(--sp-orange) !important; border-radius: 2px !important; }
.hero-content .banner-btn .btn, .heroAds-single .btn {
    background: var(--sp-orange) !important; border-radius: 2px !important; box-shadow: 0 1px 1px rgba(0, 0, 0, .09) !important; height: 44px;
}
.hero-content .banner-btn .btn:hover { background: #f05d40 !important; transform: none; }
.banner-section .swiper-pagination-bullet-active { background: var(--sp-orange) !important; }
.banner-section .custom-navigation .swiper-button-prev,
.banner-section .custom-navigation .swiper-button-next { border-radius: 0 2px 2px 0; background: rgba(0, 0, 0, .18); color: #fff; box-shadow: none; }

/* ================= Thanh dịch vụ ================= */
.featureWrapper { border-radius: 2px !important; box-shadow: var(--ad-shadow-sm) !important; }
.featureWrapper .featureItem .icon { background: rgba(var(--sp-orange-rgb), .08) !important; color: var(--sp-orange) !important; border-radius: 50% !important; }
.featureWrapper .featureItem .icon * { color: var(--sp-orange) !important; }

/* ================= Khối mục (tiêu đề trắng, chữ cam in hoa) ================= */
.section-title {
    background: #fff; height: 60px; padding: 0 20px !important; margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, .05) !important; border-radius: 2px 2px 0 0;
}
.section-title .title {
    color: var(--sp-orange) !important; font-size: 16px !important; font-weight: 500 !important; text-transform: uppercase !important; margin: 0 !important; padding: 0 !important;
}
.section-title .title::before { display: none !important; }
.section-title .section-btn a, .section-title .solid-btn {
    background: transparent !important; border: 0 !important; color: var(--sp-orange) !important; height: auto !important;
    padding: 0 !important; font-size: 14px !important; font-weight: 400 !important; box-shadow: none !important; text-transform: none !important;
}
.section-title .section-btn a::after, .section-title .solid-btn::after { content: "\ea6e"; font-family: "remixicon"; margin-left: 2px; }
.section-title .section-btn a:hover, .section-title .solid-btn:hover { background: transparent !important; color: #d73211 !important; }

/* Phần thân bên dưới tiêu đề: nền trắng liền khối như Shopee */
.deals-section, .categories-section, .brands-section, .sale-section { padding-top: 20px !important; padding-bottom: 0 !important; }
.section-title + *, .row:has(> .col-12 > .section-title) + .row { background: #fff; margin: 0; padding: 10px 6px 14px; border-radius: 0 0 2px 2px; }
.row:has(> .col-12 > .section-title) { margin: 0; }
.row:has(> .col-12 > .section-title) > .col-12 { padding: 0; }
.row:has(> .col-12 > .section-title) + .row > [class*="col"] { padding-left: 4px; padding-right: 4px; }

/* ================= THẺ SẢN PHẨM ================= */
.productItem {
    background: #fff; border: 1px solid transparent !important; border-radius: 2px !important; box-shadow: 0 .0625rem .125rem 0 rgba(0, 0, 0, .1) !important;
    overflow: hidden; transition: transform .1s cubic-bezier(.4, 0, .6, 1), box-shadow .1s, border-color .1s;
}
.productItem:hover {
    transform: translateY(-1px) !important; border-color: var(--sp-orange) !important; box-shadow: 0 .0625rem 20px 0 rgba(0, 0, 0, .05) !important; z-index: 1;
}
.productItem .productThumb-wrapper { margin: 0 !important; border-radius: 0 !important; background: #fff; }
.productItem { padding: 0 !important; }
.productItem .productThumb { display: block; width: 100%; aspect-ratio: 1 / 1; }
.productItem .productThumb img {
    width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; object-fit: cover !important; padding: 0 !important;
}
.productItem .product-content { border-top: 0 !important; }
.productItem .product-content > * { border-top: 0 !important; }
.productItem:hover .productThumb img { transform: none !important; }
.productItem .product-content { padding: 8px !important; margin: 0 !important; }
.productItem .product-bottom { margin: 0 !important; padding: 0 !important; min-height: 24px; align-items: center; }
.productItem .product-category { display: none; }
.productItem h5.title {
    font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; min-height: 40px; color: var(--sp-text) !important;
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important; margin-bottom: 8px !important;
}
.productItem .price { color: var(--sp-orange) !important; font-size: 16px !important; font-weight: 500 !important; display: flex !important; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.productItem .price del { color: rgba(0, 0, 0, .26) !important; font-size: 12px !important; font-weight: 400 !important; margin: 0 !important; }
/* Nhãn giảm giá: thẻ hồng góc phải trên */
.productItem .badge {
    left: auto !important; right: 0 !important; top: 0 !important; border-radius: 0 0 0 2px !important;
    background: #feeeea !important; color: var(--sp-orange) !important; font-size: 12px !important; font-weight: 500 !important; padding: 2px 4px !important;
}
.productItem .badge::before { content: "-"; }
/* Nút trên thẻ: giá luôn hiện; nút nhỏ tròn chỉ hiện khi rê chuột (luôn hiện trên màn hình cảm ứng) */
.productItem .productThumb-wrapper { position: relative; overflow: hidden; }
.productItem .product-actions {
    position: absolute !important; top: 28px !important; right: 8px !important; left: auto !important; bottom: auto !important;
    display: flex !important; flex-direction: column; gap: 6px; z-index: 3; margin: 0 !important; padding: 0 !important;
    opacity: 0; visibility: visible !important; transform: translateX(6px); transition: opacity .18s, transform .18s;
}
.productItem:hover .product-actions, .productItem:focus-within .product-actions { opacity: 1; transform: none; }
.productItem .product-actions .action-btn {
    position: static !important; width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important;
    display: grid !important; place-items: center; border: 0 !important; border-radius: 50% !important;
    background: rgba(255, 255, 255, .96) !important; color: rgba(0, 0, 0, .65) !important; font-size: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14) !important; opacity: 1 !important; visibility: visible !important; transform: none !important;
    transition: background .15s, color .15s;
}
.productItem .product-actions .action-btn:hover { background: var(--sp-orange) !important; color: #fff !important; }
.productItem .product-actions .action-btn.wishlist { color: var(--sp-orange) !important; }
.productItem .product-actions .action-btn.wishlist:hover { color: #fff !important; }

.productItem .cart-action {
    position: absolute !important; right: 8px !important; bottom: 8px !important; left: auto !important; top: auto !important;
    width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 3; background: transparent !important;
    opacity: 0; visibility: visible !important; transform: translateY(6px); transition: opacity .18s, transform .18s;
}
.productItem:hover .cart-action, .productItem:focus-within .cart-action { opacity: 1; transform: none; }
.productItem .cart-action .cart-btn {
    width: 38px !important; height: 38px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    display: grid !important; place-items: center; border: 0 !important; border-radius: 50% !important;
    background: var(--sp-orange) !important; color: #fff !important; font-size: 18px !important; line-height: 1 !important;
    box-shadow: 0 3px 10px rgba(var(--sp-orange-rgb), .4) !important; transition: transform .15s, background .15s;
}
.productItem .cart-action .cart-btn:hover { background: #d73211 !important; transform: scale(1.06); }
.productItem .cart-action .cart-btn span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.productItem .product-out {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
    padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-size: 13px; white-space: nowrap;
}
.productItem .quickBtn { display: none !important; }

/* Hàng giá + "Đã bán" */
.productItem .product-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; }
.productItem .product-bottom .price { min-width: 0; }
.productItem .product-sold { flex: none; font-size: 12px; color: rgba(0, 0, 0, .54); white-space: nowrap; padding-bottom: 2px; }
.productItem .product-meta { display: none !important; }

@media (hover: none) {
    .productItem .product-actions, .productItem .cart-action { opacity: 1; transform: none; }
    .productItem .product-actions .action-btn { width: 28px !important; height: 28px !important; font-size: 14px !important; }
    .productItem .cart-action .cart-btn { width: 32px !important; height: 32px !important; font-size: 16px !important; }
}

/* ================= DANH MỤC ================= */
.categoriesItem { border-radius: 2px !important; box-shadow: none !important; border: 1px solid rgba(0, 0, 0, .05) !important; }
.categoriesItem:hover { transform: none !important; box-shadow: 0 0 .8125rem 0 rgba(0, 0, 0, .05) !important; border-color: rgba(0, 0, 0, .12) !important; }
.categoriesItem .categoriesTitle a { font-size: 15px !important; font-weight: 500 !important; }
.categoriesItem .single-categories { border-radius: 0 !important; text-align: center; }
.categoriesItem .single-categories:hover { background: transparent !important; box-shadow: 0 0 .8125rem 0 rgba(0, 0, 0, .05); }
.categoriesItem .categories-thumb { background: transparent !important; border-radius: 50% !important; }
.categoriesItem .categories-icon__circle { background: #f5f5f5 !important; color: var(--sp-orange) !important; border-radius: 50% !important; }
.categoriesItem .categories-icon__circle i { color: var(--sp-orange) !important; }
.categoriesItem .single-categories .title { font-size: 13px !important; font-weight: 400 !important; color: var(--sp-text) !important; }
.categoriesItem .show-btn .solid-btn { color: var(--sp-orange) !important; border-color: var(--sp-orange) !important; background: #fff !important; border-radius: 2px !important; }

/* Nút điều hướng swiper: ô vuông trắng tròn như Shopee */
.custom-navigation .swiper-button-prev, .custom-navigation .swiper-button-next {
    width: 25px !important; height: 25px !important; border-radius: 50% !important; background: #fff !important; color: rgba(0, 0, 0, .54) !important;
    box-shadow: 0 1px 12px 0 rgba(0, 0, 0, .12) !important; border: 0 !important;
}
.swiper-pagination-bullet-active { background: var(--sp-orange) !important; }

/* ================= NÚT CHUNG ================= */
.btn-primary, .btn-secondary, .solid-btn, .theme-btn, .btn-theme {
    border-radius: 2px !important;
}
.btn-primary, .theme-btn, .btn-theme { background: var(--sp-orange) !important; border-color: var(--sp-orange) !important; color: #fff !important; }
.btn-primary:hover, .theme-btn:hover, .btn-theme:hover { background: #f05d40 !important; }

/* ================= FOOTER (sáng, viền cam trên) ================= */
.footer-section { background: #fbfbfb !important; border-top: 4px solid var(--sp-orange); color: var(--sp-text-2); margin-top: 40px; }
.footer-section .title, .footer-section .widget-title, .footer-section h5, .footer-section h4 {
    color: var(--sp-text) !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase;
}
.footer-section a, .footer-section p, .footer-section li, .footer-section span { color: var(--sp-text-2) !important; font-size: 13px; }
.footer-section a:hover { color: var(--sp-orange) !important; }
.footer-section input { background: #fff !important; border: 1px solid rgba(0, 0, 0, .14) !important; border-radius: 2px !important; color: var(--sp-text) !important; }
.footer-section .footer-top, .footer-section .footer-bottom, .footer-section [class*="copyright"] { border-color: rgba(0, 0, 0, .1) !important; }
.footer-section .social-list a { background: #fff !important; border: 1px solid rgba(0, 0, 0, .09) !important; color: var(--sp-text-2) !important; border-radius: 50% !important; }
.footer-section .social-list a:hover { background: var(--sp-orange) !important; color: #fff !important; border-color: var(--sp-orange) !important; }
.footer-section .footer-logo img, .footer-section .footer-widget > a > img { filter: none; }

/* ================= Trang chi tiết sản phẩm / giỏ hàng ================= */
.productDetail-price { background: #fafafa; padding: 15px 20px; border-radius: 0; }
.productDetail-price > span:first-child { color: var(--sp-orange) !important; font-weight: 500 !important; }

/* ================= MOBILE ================= */
@media (max-width: 767.98px) {
    .headerTopbar { display: none; }
    .headerMiddle { padding: 10px 0; }
    .headerMiddle .header-logo img { max-height: 36px; }
    .section-title { height: 48px; padding: 0 12px !important; }
    .section-title .title { font-size: 14px !important; }
    .productItem h5.title { font-size: 12px !important; line-height: 16px !important; min-height: 32px; }
    .productItem .price { font-size: 14px !important; }
    /* Lưới sản phẩm 2 cột như app Shopee */
    .deals-wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }

    /* Không cuộn ngang (menu offcanvas ẩn lệch ra ngoài 5px) */
    html, body { overflow-x: clip; }
    /* Banner sát thanh menu: bỏ 20px margin thừa của banner-wrapper */
    .banner-section { padding-top: 10px !important; }
    .banner-section .banner-wrapper { margin-top: 0 !important; }

    /* Tiêu đề khối: tên bên trái, nút "Xem thêm" bên phải trên một hàng; tên dài tự xuống dòng
       (trước đây chiều cao cố định 48px + flex-wrap làm nút rơi xuống dưới và bị khối bên dưới đè) */
    .section-title, .section-title.countdown, .section-title.v2 {
        height: auto !important; min-height: 48px; padding: 8px 12px !important;
        flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important;
    }
    .section-title .wrap, .section-title.countdown .wrap {
        flex: 1 1 auto; min-width: 0; flex-direction: row !important; flex-wrap: nowrap !important;
        align-items: center !important; justify-content: flex-start !important; gap: 8px !important;
    }
    .section-title .title { line-height: 18px !important; overflow-wrap: anywhere; }
    .section-title .title img { height: 20px; width: auto; margin-right: 2px; }
    .section-title .section-btn { flex: none; }
    .section-title .section-btn a, .section-title .solid-btn { font-size: 13px !important; white-space: nowrap; }
    /* Flash Sale: bỏ chữ "Kết thúc trong", đồng hồ đếm ngược gọn thành ô số nhỏ */
    .section-title.countdown .title { white-space: nowrap; }
    .section-title.countdown .subtitle { display: none; }
    .section-title.countdown .countdown { display: flex; flex-wrap: nowrap; gap: 4px; }
    .section-title.countdown .countdown .time-box { width: auto !important; min-width: 0 !important; height: 22px !important; padding: 0 4px !important; margin: 0 !important; border-radius: 2px !important; }
    .section-title.countdown .countdown .time-box::after { display: none; }
    .section-title.countdown .countdown .time-value { font-size: 12px !important; line-height: 22px !important; }
    .section-title.countdown .countdown .time-label { display: none; }

    /* Nút trái/phải của swiper che ảnh sản phẩm trên điện thoại — vuốt để chuyển */
    .custom-navigation { display: none !important; }
}
/* Dưới 479px swiper dùng slidesPerView 'auto' (khoảng cách 24px do swiper đặt) → cho 2 thẻ mỗi màn */
@media (max-width: 478.98px) {
    .product-wrapper .swiper-slide { width: calc(50% - 12px) !important; }
    /* Cửa hàng nổi bật: cũng 2 thẻ mỗi màn (khoảng cách 16px) */
    .vendor-section .vendor-wrapper .swiper-slide { width: calc(50% - 8px) !important; }
    /* Thẻ hẹp 160px: số sản phẩm và ngày tham gia xếp dọc, chữ nhỏ lại */
    .vendor-section .storeItem-content .title { font-size: 14px !important; }
    .vendor-section .avarage-rating { font-size: 12px !important; flex-wrap: wrap; justify-content: center; }
    .vendor-section .storeItem-meta { flex-direction: column !important; align-items: center !important; gap: 2px !important; }
    .vendor-section .storeItem-meta > * { border: 0 !important; padding: 0 !important; margin: 0 !important; font-size: 12px !important; }
}

/* ================= Ảnh trang chi tiết + popup xem nhanh: lấp đầy khung (bỏ padding 50px) ================= */
.productThumb-wrapper .swiperSlide { background: #fff !important; align-self: flex-start; }
.productThumb-wrapper .sliderContent { padding: 0 !important; aspect-ratio: 1 / 1; height: auto !important; }
.productThumb-wrapper .sliderContent img,
.product-single .swiperSlide .sliderContent img { width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: 1 / 1; object-fit: contain; }
.productThumb-wrapper .swiperThumb .swiper-slide { padding: 0 !important; overflow: hidden; background: #fff; cursor: pointer; }
.productThumb-wrapper .swiperThumb .swiper-slide img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: cover; }

/* ================= Menu tài khoản (header) kiểu Shopee ================= */
.userHeader .sideBar-menu.acct-menu {
    width: 260px; padding: 0 !important; border-radius: 4px !important; overflow: visible;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .14) !important; border: 1px solid rgba(0, 0, 0, .06);
}
.userHeader .sideBar-menu.acct-menu::before { right: 34px; box-shadow: -1px -1px 0 rgba(0, 0, 0, .06); }
.acct-menu__head {
    display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px;
    background: linear-gradient(135deg, #fff5f2, #fff 70%); border-bottom: 1px solid rgba(0, 0, 0, .06); border-radius: 4px 4px 0 0;
}
.acct-menu__head img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.acct-menu__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acct-menu__who strong { font-size: 14px; font-weight: 600; color: rgba(0, 0, 0, .87); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-menu__who small { font-size: 12px; color: rgba(0, 0, 0, .5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.acct-menu .acct-menu__list { padding: 6px 0 !important; margin: 0 !important; list-style: none; }
.acct-menu .acct-menu__list li { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.acct-menu .menu-item li a {
    display: flex !important; align-items: center; justify-content: flex-start !important; gap: 12px !important;
    padding: 10px 16px !important; border-radius: 0 !important; background: transparent !important;
    font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: rgba(0, 0, 0, .8) !important;
}
.acct-menu .menu-item li a span { display: inline !important; }
.acct-menu .menu-item li a i { font-size: 18px; width: 20px; text-align: center; color: rgba(0, 0, 0, .5); transition: color .15s; }
.acct-menu .menu-item li a:hover { background: #fafafa !important; color: #ee4d2d !important; }
.acct-menu .menu-item li a:hover i { color: #ee4d2d; }
/* Trang đang mở: chữ cam, nền rất nhạt — không còn khối cam đặc */
.acct-menu .menu-item li a.router-link-exact-active { background: #fff5f2 !important; color: #ee4d2d !important; font-weight: 500 !important; }
.acct-menu .menu-item li a.router-link-exact-active i { color: #ee4d2d; }
.acct-menu .acct-menu__sep { height: 1px; background: rgba(0, 0, 0, .06); margin: 6px 0 !important; }
.acct-menu .menu-item li a.acct-menu__logout { color: rgba(0, 0, 0, .65) !important; }
.acct-menu .menu-item li a.acct-menu__logout:hover { background: #fff1f0 !important; color: #e5322d !important; }
.acct-menu .menu-item li a.acct-menu__logout:hover i { color: #e5322d; }

/* ================= Footer: ô QR Pay + Chuyển khoản cạnh các logo thanh toán ================= */
.footer-section .payment__icon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-section .pay-badge {
    display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 6px;
    background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); white-space: nowrap; cursor: default;
}
.footer-section .pay-badge i { font-size: 17px; line-height: 1; }
.footer-section .pay-badge b { font-size: 12px !important; font-weight: 700; letter-spacing: .01em; }
.footer-section .pay-badge--qr i, .footer-section .pay-badge--qr b { color: #ee4d2d !important; }
.footer-section .pay-badge--bank i, .footer-section .pay-badge--bank b { color: #1a56db !important; }

/* Banner: slider ảnh phủ kín chiều cao khi lẫn với slider chữ (cao 460px) hoặc có banner phụ bên phải */
.banner-section .swiper-slide { height: auto; }
.banner-section .hero-image { width: 100%; height: 100%; }

/* ================= Tin tức Blog (trang chủ): thẻ trắng phẳng, ảnh 16:9, link "Đọc thêm" thay nút cam ================= */
.blog-section .swiper-slide { height: auto; }
.blog-section .blogPost-item {
    height: 100%; display: flex; flex-direction: column; margin: 0 !important; padding: 0 !important; background: #fff;
    border: 1px solid rgba(0, 0, 0, .06) !important; border-radius: 2px !important; box-shadow: 0 .0625rem .125rem 0 rgba(0, 0, 0, .08) !important;
    overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.blog-section .blogPost-item:hover { border-color: var(--sp-orange) !important; box-shadow: 0 .0625rem 20px 0 rgba(0, 0, 0, .05) !important; }
.blog-section .blog-figure {
    height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; padding: 0 !important; margin: 0 !important;
    border-radius: 0 !important; background: #f5f5f5 !important; overflow: hidden;
}
.blog-section .blog-figure img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; transition: transform .3s; }
.blog-section .blogPost-item:hover .blog-figure img { transform: scale(1.03); }
.blog-section .blog-content { flex: 1; display: flex; flex-direction: column; padding: 12px !important; }
.blog-section .blog-content .title {
    margin: 0 0 8px !important; font-size: 15px !important; font-weight: 500 !important; line-height: 21px !important; min-height: 42px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-section .blog-content .title a { color: rgba(0, 0, 0, .87) !important; font-size: inherit !important; line-height: inherit !important; }
.blog-section .blog-content .title a:hover { color: var(--sp-orange) !important; }
.blog-section .blog-btn { margin: auto 0 0 !important; padding: 0 !important; }
.blog-section .blog-btn .btn {
    height: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: var(--sp-orange) !important; font-size: 13px !important; font-weight: 500 !important; display: inline-flex; align-items: center; gap: 2px;
}
.blog-section .blog-btn .btn::after { content: "\ea6e"; font-family: "remixicon"; font-size: 15px; }
.blog-section .blog-btn .btn:hover { background: transparent !important; color: #d73211 !important; }
.blog-section .blog-pagination { position: static !important; margin-top: 12px; line-height: 0; }
@media (max-width: 478.98px) {
    /* 2 thẻ mỗi màn như lưới sản phẩm */
    .blog-section .blog-wrapper .swiper-slide { width: calc(50% - 12px) !important; }
    .blog-section .blog-content { padding: 8px !important; }
    .blog-section .blog-content .title { font-size: 13px !important; line-height: 18px !important; min-height: 36px; margin-bottom: 6px !important; }
    .blog-section .blog-btn .btn { font-size: 12px !important; }
}

/* ================= Mobile: thẻ danh mục (Danh mục phổ biến / nổi bật tháng này) ================= */
/* Trước: 4 danh mục con xếp 2x2, mỗi ô cao 112px, thẻ cao 460px. Giờ: 1 hàng 4 biểu tượng tròn như Shopee. */
@media (max-width: 767.98px) {
    .categories-section .categoriesItem { padding: 12px !important; height: auto; }
    .categories-section .categoriesItem .categoriesTitle { margin: 0 0 10px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .categories-section .categoriesItem .categoriesTitle a { font-size: 15px !important; }
    /* Nút "Duyệt tất cả danh mục" trong thẻ trùng với nút trên tiêu đề khối */
    .categories-section .categoriesItem .show-btn { display: none !important; }
    .categories-section .categoriesItem .categories-inner {
        display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px !important; margin: 0 !important;
    }
    .categories-section .categoriesItem .single-categories {
        width: auto !important; max-width: none !important; flex: none !important; min-width: 0;
        display: flex !important; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 !important; margin: 0 !important;
    }
    .categories-section .categoriesItem .single-categories:hover { box-shadow: none !important; }
    .categories-section .categoriesItem .single-categories .categories-icon {
        width: 56px; height: 56px !important; border-radius: 50% !important; margin: 0 !important;
        display: flex; align-items: center; justify-content: center; box-shadow: none !important;
    }
    .categories-section .categoriesItem .categories-icon__circle { width: 38px; height: 38px; font-size: 20px; box-shadow: none !important; }
    .categories-section .categoriesItem .single-categories .title {
        width: 100%; font-size: 12px !important; line-height: 15px !important; min-height: 30px; margin: 0 !important; text-align: center;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
}

/* ================= Mobile: footer ================= */
/* Trước: mọi cột rộng 100% (col-xs-6 không có trong Bootstrap 5), khoảng cách lớn, chữ bản quyền bị nút lên đầu trang che. */
@media (max-width: 767.98px) {
    .footer-section { margin-top: 24px !important; padding: 0 !important; }
    .footer-section .container { padding-left: 16px; padding-right: 16px; }
    .footer-section .row { margin-left: 0; margin-right: 0; }
    .footer-section .row > [class*="col"] { padding-left: 0; padding-right: 0; }
    .footer-section .footer-top { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 18px 0 16px !important; margin: 0 !important; }
    .footer-section .socialLink { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap !important; }
    .footer-section .socialLink .title { height: auto !important; line-height: 1.3 !important; margin: 0 !important; white-space: nowrap; }
    .footer-section .social-list { display: flex; flex: none; gap: 6px !important; margin: 0 !important; }
    .footer-section .social-list li { margin: 0 !important; }
    .footer-section .social-list a { width: 30px !important; height: 30px !important; font-size: 15px !important; display: grid !important; place-items: center; }
    .footer-section .socialLink .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .footer-section .payment-gataway { display: block !important; }
    .footer-section .payment-gataway .title { display: block !important; margin: 0 0 8px !important; }
    .footer-section .payment__icon { gap: 6px !important; }
    .footer-section .payment__icon .pay-badge { height: 28px; padding: 0 8px; }
    .footer-section .payment__icon img { height: 28px; width: auto; padding: 5px 8px; margin: 0 !important; background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
    .footer-section .footer-wrapper { padding: 16px 0 !important; margin: 0 !important; border-top: 1px solid rgba(0, 0, 0, .08); }
    .footer-section .widget-title { margin: 0 0 10px !important; font-size: 13px !important; }
    .footer-section .footer-widget p, .footer-section .footer-widget p * { font-size: 13px !important; line-height: 1.6 !important; margin: 0 !important; }
    .footer-section .applist { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px !important; }
    .footer-section .applist a {
        display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 12px !important; margin: 0 !important;
        background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; font-size: 13px !important; font-weight: 500; color: rgba(0, 0, 0, .8) !important;
    }
    .footer-section .applist a img { width: 18px !important; height: 18px !important; margin: 0 !important; }
    .footer-section .widget-list { margin: 0 !important; padding: 0 !important; }
    .footer-section .widget-list li { margin: 0 0 8px !important; padding: 0 !important; line-height: 1.5 !important; }
    .footer-section .widget-list li:last-child { margin-bottom: 0 !important; }
    .footer-section .widget-list li::before, .footer-section .widget-list li::after { display: none !important; }
    .footer-section .widget-list li:has(.icon) { display: flex; align-items: flex-start; gap: 8px; }
    .footer-section .widget-list li .icon { position: static !important; flex: none; width: 18px; }
    .footer-section .widget-list li .icon, .footer-section .widget-list li .icon i { color: var(--sp-orange) !important; }
    /* Liên kết hữu ích + Tài khoản: 2 cột cạnh nhau */
    .footer-section .row > .col-xs-6 { flex: 0 0 50%; max-width: 50%; }
    .footer-section .footer-search { display: flex !important; margin-top: 10px !important; }
    .footer-section .footer-search .form-control { height: 40px !important; flex: 1; min-width: 0; border-radius: 2px 0 0 2px !important; margin: 0 !important; }
    .footer-section .footer-search .btn {
        position: static !important; height: 40px !important; width: auto !important; padding: 0 16px !important;
        border-radius: 0 2px 2px 0 !important; margin: 0 !important; white-space: nowrap;
    }
    .footer-section .footer-bottom { padding: 14px 0 72px !important; border-top: 1px solid rgba(0, 0, 0, .08); }
    .footer-section .footer-bottom p { font-size: 12px !important; margin: 0 !important; }
}