/* ===== DivineShop-Inspired Homepage Styles ===== */
/* Be Vietnam Pro được preload ở client/header.php — không cần @import lại */

/* --- Global Overrides for Home Page --- */
.divine-home {
    background-color: #f0f2f5;
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.divine-home .section.feature-part {
    padding-top: 20px;
}

/* --- Hero grid: Sidebar (full height) | Carousel + Sub-banners (col giữa+phải) --- */
.divine-hero-grid {
    display: grid;
    grid-template-columns: 225px 1fr 284px;  /* cột phải = 284px khớp banner DivineShop */
    grid-template-rows: 306px auto;  /* row 1: 306px (carousel + 2 banner phải); row 2: sub-banner */
    grid-template-areas:
        "sidebar carousel right"
        "sidebar subbanner subbanner";
    gap: 14px;
    margin-bottom: 14px;
    align-items: stretch;
}
.divine-cat-sidebar { grid-area: sidebar; }
.divine-banner-center { grid-area: carousel; }
.divine-banner-right { grid-area: right; }
.divine-sub-banner-row { grid-area: subbanner; }

/* Category Sidebar (Cột trái) — cap cứng 440px (= row1 306 + gap 14 + sub-banner ~119) */
/* → list bên trong overflow scroll khi nhiều cat, không push grid row 2 phình theo */
.divine-cat-sidebar {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    max-height: 440px;
}
.divine-cat-header {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    font-size: 13.5px;
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}
.divine-cat-list {
    list-style: none;
    padding: 2px 0;
    margin: 0;
    flex: 1;
    min-height: 0;            /* fix flexbox: cho phép overflow scroll thay vì grow theo content */
    overflow-y: auto;
    scrollbar-width: thin;
}
.divine-cat-list { scrollbar-color: transparent transparent; }
.divine-cat-list::-webkit-scrollbar { width: 3px; }
.divine-cat-list::-webkit-scrollbar-track { background: transparent; }
.divine-cat-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.divine-cat-list:hover { scrollbar-color: #d1d5db transparent; }
.divine-cat-list:hover::-webkit-scrollbar-thumb { background: #d1d5db; }
.divine-cat-list li {
    margin: 0;
}
.divine-cat-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px;
    color: #374151;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
    line-height: 1.35;
}
.divine-cat-link:hover,
.divine-cat-link.active {
    background: #f0f5ff;
    color: var(--primary);
    border-left-color: var(--primary);
}
.divine-cat-link span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.cat-icon-fa {
    font-size: 15px;
    color: var(--primary);
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

/* Center Banner Carousel - fill row1 bằng height 100%, không đụng bootstrap carousel layering */
.divine-banner-center {
    border-radius: 10px;
    overflow: hidden;
    min-width: 0;
    height: 100%;
    position: relative;
}
.divine-banner-center .carousel,
.divine-banner-center .carousel-inner {
    height: 100%;
}
/* carousel-item giữ default bootstrap (position relative + float để layer) — KHÔNG flex */
.divine-banner-center .carousel-item {
    height: 100%;
}
.divine-banner-main .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}
.divine-banner-main .carousel-indicators {
    margin-bottom: 10px;
}
.divine-banner-main .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    margin: 0 3px;
    opacity: 0.5;
}
.divine-banner-main .carousel-indicators button.active {
    opacity: 1;
}
.divine-banner-main .carousel-control-prev,
.divine-banner-main .carousel-control-next {
    width: 36px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.2s;
}
.divine-banner-center:hover .carousel-control-prev,
.divine-banner-center:hover .carousel-control-next {
    opacity: 1;
}
.divine-banner-main .carousel-control-prev { left: 10px; }
.divine-banner-main .carousel-control-next { right: 10px; }
.divine-banner-main .carousel-control-prev-icon,
.divine-banner-main .carousel-control-next-icon {
    width: 14px;
    height: 14px;
}

/* Right Banners - fluid: 2 banner stack với aspect-ratio 284:148, full width của col */
.divine-banner-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.divine-right-banner {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #f3f4f6;
    width: 100%;
    aspect-ratio: 284/148;
}
.divine-right-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.divine-right-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* ===== Sticky Side Banners — neo vào mép container 1320px (Bootstrap xxl) ===== */
.divine-sticky-left,
.divine-sticky-right {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    width: 200px;
}
/* Công thức: 50% - (container_half 600 + banner_width 200) = 50% - 800px */
.divine-sticky-left  { left: calc(50% - 800px); right: auto; }
.divine-sticky-right { right: calc(50% - 800px); left: auto; }
.divine-sticky-banner {
    display: block;
    overflow: hidden;
    position: relative;
    background: transparent;
    border-radius: 12px;
}
.divine-sticky-banner img {
    width: 100%;
    height: auto;
    display: block;
}
.divine-sticky-close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 2;
    font-weight: bold;
    line-height: 1;
}
.divine-sticky-right .divine-sticky-close { right: auto; left: 6px; }
.divine-sticky-close:hover { background: rgba(200,0,0,0.85); }
@media (max-width: 1599px) {
    .divine-sticky-left, .divine-sticky-right { display: none; }
}

/* Sub-banner row (4 ô ngang) — nằm trong hero-grid, span cột giữa+phải, giữ tỉ lệ 284:148 */
.divine-sub-banner-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.divine-sub-banner-item {
    display: block;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    background: #f3f4f6;
    width: 100%;
    aspect-ratio: 284/148;
}
.divine-sub-banner-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.divine-sub-banner-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Section Headers (Category Titles) --- */
.divine-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}
.divine-section-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}
.divine-section-header h3 img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.divine-section-header .divine-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: var(--primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
}
.divine-section-header .divine-explore-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* --- Product Card Grid --- */
.divine-product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 12px;
}
.divine-product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.25s ease;
    cursor: pointer;
    position: relative;
    /* Stretch fill grid row → tất cả cards cùng height */
    height: 100%;
    display: flex;
    flex-direction: column;
}
.divine-product-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}
.divine-product-card .card-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 284/148;  /* khớp DivineShop: ảnh render 284x148 (~1.92:1) */
    overflow: hidden;
    background: #f9fafb;
}
.divine-product-card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.divine-product-card:hover .card-img-wrapper img {
    transform: scale(1.05);
}
.divine-product-card .card-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    z-index: 2;
}
.divine-product-card .badge-discount {
    background: #ef4444;
    color: #fff;
}
.divine-product-card .badge-outstock {
    background: rgba(107,114,128,0.85);
    color: #fff;
}
.divine-product-card .card-body-divine {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.divine-product-card .card-img-wrapper {
    flex-shrink: 0;
}
.divine-product-card .card-subcat-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    margin-bottom: 6px;
    background: #f0f5ff;
    color: var(--primary);
    font-size: 10.5px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    line-height: 1.3;
    transition: all 0.15s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.divine-product-card .card-subcat-tag i { font-size: 9px; }
.divine-product-card .card-subcat-tag:hover {
    background: var(--primary);
    color: #fff;
}
.divine-product-card .card-title-divine {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Lock height = 2 lines × 14 × 1.4 = 39.2px → force đều mọi card */
    height: 39px;
    min-height: 39px;
    max-height: 39px;
}
.divine-product-card .card-title-divine a {
    color: inherit;
    text-decoration: none;
}
.divine-product-card .card-title-divine a:hover {
    color: var(--primary);
}
.divine-product-card .card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
    color: #6b7280;
    height: 18px;            /* lock 1 dòng */
    overflow: hidden;
    white-space: nowrap;
}
.divine-product-card .card-meta .meta-stock,
.divine-product-card .card-meta .meta-sold {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.divine-product-card .card-meta .meta-stock i {
    color: #10b981;
    font-size: 10px;
    flex-shrink: 0;
}
.divine-product-card .card-price-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;       /* không cho wrap → tránh card bị cao bất thường */
    overflow: hidden;
    height: 28px;            /* lock chiều cao 1 dòng */
    margin-top: auto;        /* đẩy price xuống bottom → cards uniform height */
}
.divine-product-card .price-current {
    flex-shrink: 0;
}
.divine-product-card .price-original {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.divine-product-card .price-current {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary);
}
.divine-product-card .price-original {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: line-through;
}
.divine-product-card .price-discount-badge {
    font-size: 11px;
    font-weight: 700;
    color: #ef4444;
    background: #fef2f2;
    padding: 2px 6px;
    border-radius: 4px;
}

/* --- Category Section Block --- */
.divine-category-block {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

/* --- "Xem thêm" Link --- */
.divine-view-more {
    display: block;
    text-align: center;
    padding: 12px;
    color: var(--primary);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border-top: 1px solid #f3f4f6;
    margin-top: 12px;
    transition: all 0.15s;
}
.divine-view-more:hover {
    background: #f0f5ff;
    color: var(--primary);
}

/* --- Recent Transactions Section --- */
.divine-recent-section {
    background: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    margin-bottom: 24px;
}
.divine-recent-section .divine-section-header {
    border-bottom: none;
    padding-bottom: 8px;
    margin-bottom: 12px;
}
.divine-recent-section .divine-section-header h3 {
    font-size: 18px;
}
.divine-recent-item {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #4b5563;
}
.divine-recent-item:last-child {
    border-bottom: none;
}

/* --- Recent Orders Popup (góc trái dưới, slide vào/ra) --- */
.divine-recent-popup {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 250;
    width: 290px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 8px 32px 8px 8px;
    display: flex;
    align-items: center;
    opacity: 0;
    transform: translateX(-120%);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(.2,.7,.3,1);
}
.divine-recent-popup.is-visible {
    opacity: 1;
    transform: translateX(0);
}
.divine-recent-popup-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}
.divine-recent-popup-link:hover { color: inherit; }
.divine-recent-popup-img {
    width: 80px;            /* ~52 × 1.6 — match aspect ratio thực tế của ảnh sản phẩm */
    height: 50px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.divine-recent-popup-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Fallback khi product không có ảnh: gradient + shopping-bag icon */
.divine-recent-popup-img.is-fallback {
    background: linear-gradient(135deg, var(--primary), #818cf8);
}
.divine-recent-popup-img.is-fallback::before {
    content: "🛍️";
    font-size: 26px;
    line-height: 1;
}
.divine-recent-popup-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
}
.divine-recent-popup-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.divine-recent-popup-product {
    font-size: 11.5px;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.divine-recent-popup-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.3;
}
.divine-recent-popup-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(0,0,0,0.06);
    color: #6b7280;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}
.divine-recent-popup-close:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ===== NAVBAR PART (3 items + trust badges) ===== */
.navbar-part .navbar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    min-height: 48px;
}
.navbar-part .navbar-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4px;
}
.navbar-part .navbar-item {
    margin: 0;
    padding: 0;
}
.navbar-part .navbar-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: #374151;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    position: relative;
}
/* Icon badge pastel mỗi item 1 màu khác — match colorful PNG sub-cat */
.navbar-part .navbar-link > i {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 12px;
    transition: all 0.15s;
    flex-shrink: 0;
}
/* Trang chủ — xanh dương */
.navbar-part .navbar-link > i.fa-house {
    background: #dbeafe;
    color: #2563eb;
}
/* Image icon (PNG) — pastel badge wrapper, mỗi item màu pastel khác nhau */
.navbar-part .navbar-link .nav-icon-img {
    width: 38px;
    height: 38px;
    padding: 4px;
    border-radius: 9px;
    background: #f0f5ff;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.18s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
/* Per-item pastel màu (dùng nth-child trong navbar-list) */
.navbar-part .navbar-list > .navbar-item:nth-child(1) .nav-icon-img { background: #dbeafe; }  /* Trang chủ — blue */
.navbar-part .navbar-list > .navbar-item:nth-child(2) .nav-icon-img { background: #ede9fe; }  /* Sản phẩm — tím */
.navbar-part .navbar-list > .navbar-item:nth-child(3) .nav-icon-img { background: #d1fae5; }  /* Nạp tiền — xanh lá */
.navbar-part .navbar-list > .navbar-item:nth-child(4) .nav-icon-img { background: #fef3c7; }  /* Tin tức — vàng cam */
.navbar-part .navbar-list > .navbar-item:nth-child(5) .nav-icon-img { background: #fce7f3; }  /* API — hồng */
.navbar-part .navbar-link:hover .nav-icon-img {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Sản phẩm — tím */
.navbar-part .navbar-link > i.fa-grip {
    background: #ede9fe;
    color: #7c3aed;
}
/* Nạp tiền — xanh lá */
.navbar-part .navbar-link > i.fa-wallet {
    background: #d1fae5;
    color: #059669;
}
/* Tin tức — cam vàng */
.navbar-part .navbar-link > i.fa-newspaper {
    background: #fef3c7;
    color: #d97706;
}
.navbar-part .navbar-link:hover {
    background: #f0f5ff;
    color: var(--primary);
}
.navbar-part .navbar-link:hover > i {
    transform: scale(1.08);
    filter: brightness(0.95);
}
/* Mega-menu "Sản phẩm" — panel lớn hover xuống chia cột */
.navbar-part .container { position: relative; }    /* containing block cho megamenu absolute */
.navbar-part .navbar-mega { position: static; }   /* để mega-menu full width container */
.navbar-megamenu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    z-index: 200;
    padding: 24px 28px;
    max-height: 70vh;
    overflow-y: auto;
}
/* Bridge transparent giữa trigger và panel — giữ hover liên tục */
.navbar-megamenu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
}
.navbar-mega:hover .navbar-megamenu,
.navbar-megamenu:hover { display: block; }
.navbar-megamenu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px 28px;
}
.mm-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mm-col-title {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 12px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.mm-col-title img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}
.mm-col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mm-col-list li { margin: 0; padding: 0; }
.mm-col-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.12s;
    line-height: 1.4;
}
.mm-col-list a:hover {
    background: #f0f5ff;
    color: var(--primary);
    transform: translateX(2px);
}
.mm-col-list a img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 4px;
}
.mm-col-list a > i {
    width: 22px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    flex-shrink: 0;
}
.mm-col-list a:hover > i { color: var(--primary); }
.mm-col-list a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-col-empty {
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}
.mm-col-empty i { margin-right: 4px; }

/* Mega-menu "Xem tất cả sản phẩm" — text link gọn ở footer panel */
.mm-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 18px;
    padding: 6px 0;
    color: var(--primary) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s, gap 0.18s;
}
.mm-view-all:hover {
    border-bottom-color: var(--primary);
    gap: 10px;
    color: var(--primary) !important;
}
.mm-view-all > i:first-child { font-size: 12px; opacity: 0.85; }
.mm-view-all > i:last-child { font-size: 10px; }

/* Mobile category-sidebar "Tất cả sản phẩm" link đầu list */
.category-sidebar .cs-all-link .category-link {
    background: linear-gradient(135deg, var(--primary), #818cf8) !important;
    color: #fff !important;
    font-weight: 600 !important;
    margin: 8px 14px 4px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(99,102,241,0.2);
}
.category-sidebar .cs-all-link .category-link i { color: #fff !important; }
.category-sidebar .cs-all-link .category-link:hover {
    background: linear-gradient(135deg, var(--primary), #818cf8) !important;
    color: #fff !important;
    filter: brightness(1.08);
}

/* Mobile — megamenu fall to single col, hide on small screens (use sidebar) */
@media (max-width: 991px) {
    .navbar-mega { position: relative; }
    .navbar-megamenu {
        position: static;
        width: 100%;
        max-height: 400px;
        padding: 16px;
    }
    .navbar-megamenu-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* Quick category items — top sub-cat hiển thị thẳng nav */
.navbar-part .navbar-item-quick .navbar-link {
    padding: 8px 12px;
    gap: 6px;
}
.navbar-part .nav-quick-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.navbar-part .nav-quick-label {
    white-space: nowrap;
    text-transform: capitalize;
}

/* Dropdown menu (Nạp tiền) */
.navbar-part .dropdown { position: relative; }
.navbar-part .dropdown-position-list {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: none !important;
    width: auto !important;
    height: auto !important;
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    list-style: none;
    padding: 6px !important;
    min-width: 220px;
    z-index: 100;
}
/* Override main.css ::before arrow tooltip (12×12 rotated diamond) → thành bridge transparent */
.navbar-part .dropdown-position-list::before {
    content: "" !important;
    position: absolute !important;
    top: -12px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 14px !important;
    background: transparent !important;
    border: none !important;
    transform: none !important;
    border-radius: 0 !important;
    z-index: 1 !important;
}
.navbar-part .dropdown:hover .dropdown-position-list,
.navbar-part .dropdown-position-list:hover { display: block !important; }
.navbar-part .dropdown-position-list li { margin: 0; }
.navbar-part .dropdown-position-list li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.navbar-part .dropdown-position-list li a:hover {
    background: #f0f5ff;
    color: var(--primary);
}
.navbar-part .dropdown-position-list li a img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Quick categories list bên phải */
.navbar-list-right {
    margin-left: auto;
    flex-wrap: wrap;
}

/* Mobile responsive navbar */
@media (max-width: 991px) {
    .navbar-list-right { display: none; }
    .navbar-part .navbar-content { gap: 4px; min-height: 44px; }
    .navbar-part .navbar-link { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 575px) {
    .navbar-part .navbar-link { padding: 8px 10px; font-size: 12.5px; }
    .navbar-part .navbar-link i { display: none; }
}

/* ===== HEADER PART (logo + search + widgets) — modern minimalist ===== */
.header-part {
    background: #fff;
    border-bottom: 1px solid #f3f4f6;
}
.header-part .header-content {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 16px 0;
    min-height: 76px;
}
.header-mobile-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #1f2937;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
}
.header-part .header-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}
.header-part .header-logo img {
    max-height: 44px;
    width: auto;
    display: block;
}

/* Search bar — pill shape, prominent center */
.header-part .header-form {
    flex: 1;
    max-width: 560px;
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 28px;
    padding: 0 6px 0 20px;
    height: 46px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.header-part .header-form:hover { border-color: #d1d5db; }
.header-part .header-form:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}
.header-part .header-form-icon {
    color: #9ca3af;
    font-size: 14px;
    margin-right: 10px;
    transition: color 0.18s;
}
.header-part .header-form:focus-within .header-form-icon { color: var(--primary); }
.header-part .header-form input[type="text"] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #1f2937;
    padding: 0;
    outline: none;
    min-width: 0;
    height: 100%;
}
.header-part .header-form input[type="text"]::placeholder {
    color: #9ca3af;
}
.header-part .header-form button[type="submit"] {
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0 22px;
    height: 34px;
    border-radius: 22px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
.header-part .header-form button[type="submit"]:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Widget group */
.header-part .header-widget-group {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
}
/* Override main.css legacy widget styles */
.header-part .header-widget-group .header-widget,
.header-part .header-widget-group .header-widget:first-child {
    margin-left: 0 !important;
}
.header-part .header-widget i {
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    line-height: 1 !important;
    color: inherit !important;
    font-size: inherit !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.header-part .header-widget img {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
}
/* PNG icons trong header widget (cart, heart) — fixed size, không inherit auto */
.header-part .header-widget .header-widget-img {
    width: 30px !important;
    height: 30px !important;
    object-fit: contain;
    transition: transform 0.18s;
}
.header-part .header-widget:hover .header-widget-img {
    transform: scale(1.12);
}
.header-part .header-widget sup {
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    width: auto !important;
    height: 16px !important;
    border: 2px solid #fff !important;
    background: #ef4444 !important;
}
.header-part .header-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #4b5563;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.15s;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
/* Cart icon — pastel xanh dương */
.header-part .header-widget-group > a:nth-child(1).header-widget {
    background: #dbeafe;
}
/* Heart icon — pastel hồng */
.header-part .header-widget-group > a:nth-child(2).header-widget {
    background: #fce7f3;
}
.header-part .header-widget:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    filter: brightness(0.96);
}
.header-part .header-widget .widget-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 12px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-part .header-widget .widget-badge.is-zero { display: none; }

/* User dropdown — borderless modern, separator pseudo cân đối 2 bên */
.header-user-dropdown {
    position: relative;
    flex-shrink: 0;
    padding-left: 16px;
    margin-left: 12px;
}
.header-user-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background: #e5e7eb;
}
.hud-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 14px 4px 4px;
    background: transparent;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: background 0.15s;
    font-family: inherit;
}
.hud-trigger:hover {
    background: #f3f4f6;
}
.hud-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary), #818cf8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e5e7eb;
}
.hud-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hud-avatar-initial {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
}
.hud-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}
.hud-info .hud-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    text-transform: none;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hud-info .hud-money {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
}
.hud-info .hud-money::before {
    content: "💰";
    font-size: 10px;
    margin-right: 3px;
}
.hud-caret {
    color: #9ca3af;
    font-size: 10px;
    margin-left: 2px;
    transition: transform 0.15s;
}
.hud-trigger[aria-expanded="true"] .hud-caret { transform: rotate(180deg); }

.hud-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    min-width: 230px;
    z-index: 200;
}
.hud-menu.open { display: block; }
.hud-menu li { margin: 0; padding: 0; }
.hud-menu .hud-header {
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}
.hud-menu .hud-header strong {
    display: block;
    font-size: 13px;
    color: #1f2937;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hud-menu .hud-header span {
    font-size: 12px;
    color: #6b7280;
    display: block;
    margin-top: 2px;
}
.hud-menu .hud-header b { color: var(--primary); font-weight: 700; }
.hud-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    color: #374151;
    text-decoration: none;
    font-size: 13px;
    border-radius: 6px;
    transition: background 0.12s, color 0.12s;
}
.hud-menu li a i {
    width: 18px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}
/* PNG icons trong user dropdown menu */
.hud-menu li a .hud-menu-img {
    width: 30px;
    height: 30px;
    padding: 3px;
    background: #f3f4f6;
    border-radius: 7px;
    object-fit: contain;
    flex-shrink: 0;
    transition: all 0.15s;
}
.hud-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hud-menu li a:hover {
    background: #f0f5ff;
    color: var(--primary);
}
.hud-menu li a:hover i { color: var(--primary); }
.hud-menu li a:hover .hud-menu-img {
    background: #ede9fe;
    transform: scale(1.06);
}
.hud-menu .hud-divider {
    height: 1px;
    background: #f3f4f6;
    margin: 4px 0;
}
.hud-menu .hud-logout { color: #ef4444 !important; }
.hud-menu .hud-logout i { color: #ef4444 !important; }
.hud-menu .hud-logout:hover { background: #fef2f2 !important; }
.hud-menu .hud-admin { color: var(--primary) !important; font-weight: 600; }
.hud-menu .hud-admin i { color: var(--primary) !important; }
.hud-menu .hud-admin:hover { background: #f0f5ff !important; }

/* Auth inline (Đăng nhập / Đăng ký) — 1 cụm gọn khi chưa login */
.header-auth-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.header-auth-inline a {
    color: #374151;
    text-decoration: none;
    transition: color 0.15s;
}
.header-auth-inline a:hover {
    color: var(--primary);
}
.header-auth-inline .auth-sep {
    color: #d1d5db;
    font-weight: 400;
}

/* Mobile responsive — 2-row layout (hamburger+logo+widgets | search) */
/* Override main.css mobile rules (flex-direction: column, display: none on logo/form/widgets) */
@media (max-width: 991px) {
    .header-part .header-content {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "hamburger logo widgets"
            "search    search search";
        flex-direction: row !important;
        flex-wrap: wrap !important;
        column-gap: 12px;
        row-gap: 8px;
        padding: 10px 0;
        min-height: auto;
        align-items: center;
        justify-content: stretch !important;
    }
    .header-mobile-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        grid-area: hamburger;
        font-size: 22px;
        color: #1f2937;
    }
    /* Logo center row 1, override main.css display:none + margin-right:50px */
    .header-part .header-logo {
        display: inline-flex !important;
        margin: 0 !important;
        grid-area: logo;
        justify-content: center;
        flex: 0 1 auto;
    }
    .header-part .header-logo img { max-height: 32px; width: auto; }
    /* Force show widget group ở row 1 phải */
    .header-part .header-widget-group {
        display: flex !important;
        grid-area: widgets;
        flex-shrink: 0;
        gap: 6px;
    }
    .header-part .header-widget { display: inline-flex !important; flex-shrink: 0; }
    /* Search bar row 2, full width — override main.css display:none */
    .header-part .header-form {
        display: flex !important;
        grid-area: search;
        max-width: none;
        width: 100%;
        flex: none;
        min-width: 0;
        height: 40px;
        padding: 0 4px 0 14px;
        margin: 0;
    }
    .header-part .header-form button[type="submit"] { padding: 0 14px; height: 32px; font-size: 12px; }
    .hud-info { display: none; }
    .hud-trigger { padding: 4px 6px 4px 4px; }
    .header-auth-inline { font-size: 12.5px; gap: 6px; padding: 0 4px; }
}
@media (max-width: 575px) {
    .header-part .header-content { column-gap: 8px; row-gap: 6px; padding: 8px 0; }
    .header-part .header-logo img { max-height: 28px; }
    .header-part .header-widget { width: 34px; height: 34px; font-size: 14px; border-radius: 50%; }
    .header-part .header-widget-group { gap: 4px; }
    .header-part .header-form { padding: 0 4px 0 12px; height: 38px; }
    .header-part .header-form input[type="text"] { font-size: 13px; }
    .header-part .header-form button[type="submit"] { padding: 0 10px; font-size: 11.5px; }
}

/* ===== CONTACT PAGE ===== */
.cp-hero {
    background: linear-gradient(135deg, var(--primary), #818cf8);
    padding: 56px 0 48px;
    text-align: center;
    color: #fff;
}
.cp-hero-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #fff;
    letter-spacing: -0.5px;
}
.cp-hero-desc {
    font-size: 14.5px;
    color: rgba(255,255,255,0.88);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.6;
}
.cp-section {
    padding: 24px 0 60px;
    background: #f9fafb;
    min-height: 50vh;
}
.cp-breadcrumb { margin-bottom: 22px; }

/* 3 info cards */
.cp-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 36px;
}
.cp-info-card {
    background: #fff;
    border-radius: 12px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.2s;
    border: 1px solid #f3f4f6;
}
.cp-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    border-color: var(--primary);
}
.cp-info-card.cp-info-card-primary {
    background: linear-gradient(135deg, var(--primary), #818cf8);
    color: #fff;
    border: none;
}
.cp-info-card.cp-info-card-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
}
.cp-info-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px auto;
    background: #f0f5ff;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: all 0.2s;
}
.cp-info-card-primary .cp-info-icon {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.cp-info-card h4 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #1f2937;
    margin: 0 0 10px 0;
}
.cp-info-card-primary h4 { color: rgba(255,255,255,0.92); }
.cp-info-card p {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
}
.cp-info-card-primary p { color: #fff; font-weight: 600; }
.cp-info-card a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s;
}
.cp-info-card a:hover { color: var(--primary); }
.cp-info-card-primary a:hover { color: #fff; opacity: 0.85; }

/* Quick contact section */
.cp-quick-section {
    background: #fff;
    border-radius: 12px;
    padding: 32px 28px;
    text-align: center;
    margin-bottom: 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.cp-section-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 6px 0;
}
.cp-section-sub {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0 0 24px 0;
}
.cp-quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    max-width: 800px;
    margin: 0 auto;
}
.cp-quick-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.18s;
}
.cp-quick-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.cp-quick-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
}
.cp-quick-zalo .cp-quick-icon { background: linear-gradient(135deg, #0068ff, #0050d0); }
.cp-quick-icon.cp-quick-icon-img {
    background: #fff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    padding: 4px;
}
.cp-quick-icon-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.cp-quick-zalo:hover { border-color: #0068ff; }
.cp-quick-fb .cp-quick-icon { background: linear-gradient(135deg, #00c6ff, #0078ff, #ad36ff); }
.cp-quick-fb:hover { border-color: #0078ff; }
.cp-quick-tg .cp-quick-icon { background: linear-gradient(135deg, #2aabee, #229ed9); }
.cp-quick-tg:hover { border-color: #229ed9; }
.cp-quick-body {
    text-align: left;
    display: flex;
    flex-direction: column;
}
.cp-quick-label {
    font-size: 11.5px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
.cp-quick-body strong {
    font-size: 14px;
    color: #1f2937;
    font-weight: 700;
}

/* Custom content card (page_contact) */
.cp-content-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px 36px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    color: #374151;
    line-height: 1.75;
}
.cp-content-card * { max-width: 100%; }
.cp-content-card img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}
.cp-content-card iframe {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    border-radius: 8px;
    border: 0;
    margin: 16px 0;
}
.cp-content-card h1, .cp-content-card h2, .cp-content-card h3 {
    color: #1f2937;
    margin-top: 24px;
    margin-bottom: 10px;
}
.cp-content-card a { color: var(--primary); }

/* Mobile */
@media (max-width: 991px) {
    .cp-info-grid { grid-template-columns: 1fr; gap: 14px; }
    .cp-hero-title { font-size: 26px; }
    .cp-hero { padding: 40px 0 36px; }
}
@media (max-width: 575px) {
    .cp-hero-title { font-size: 22px; }
    .cp-hero-desc { font-size: 13px; }
    .cp-content-card { padding: 22px 18px; }
    .cp-quick-section { padding: 22px 18px; }
}

/* ===== BLOGS PAGE PRO ===== */
.blog-pro-hero {
    background: linear-gradient(135deg, var(--primary), #818cf8);
    padding: 56px 0 48px;
    text-align: center;
    color: #fff;
}
.bp-hero-title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #fff;
    letter-spacing: -0.5px;
}
.bp-hero-desc {
    font-size: 14.5px;
    color: rgba(255,255,255,0.88);
    max-width: 600px;
    margin: 0 auto 24px auto;
    line-height: 1.6;
}
.bp-search-form {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 30px;
    padding: 4px 4px 4px 22px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    height: 50px;
}
.bp-search-form i { color: #9ca3af; margin-right: 12px; }
.bp-search-form input[type="text"] {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1f2937;
    background: transparent;
    height: 100%;
}
.bp-search-form button {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 0 26px;
    height: 38px;
    border-radius: 22px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s;
}
.bp-search-form button:hover { filter: brightness(1.08); }

.blog-pro-section {
    padding: 32px 0 60px;
    background: #f9fafb;
    min-height: 60vh;
}

/* Category pills */
.bp-cat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}
.bp-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}
.bp-cat-pill:hover { border-color: var(--primary); color: var(--primary); }
.bp-cat-pill.is-active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    font-weight: 600;
}
.bp-cat-pill .bp-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
    height: 18px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}
.bp-cat-pill.is-active .bp-cat-count { background: rgba(255,255,255,0.25); color: #fff; }

/* Toolbar */
.bp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}
.bp-result-count { font-size: 13px; color: #6b7280; font-weight: 500; }
.bp-result-count i { margin-right: 6px; color: var(--primary); }
.bp-sort-form { display: inline-flex; align-items: center; gap: 10px; }
.bp-sort-form label { font-size: 13px; color: #6b7280; margin: 0; font-weight: 500; }
.bp-sort-form select {
    padding: 6px 30px 6px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.bp-sort-form select:hover { border-color: var(--primary); }

/* Blog grid */
.bp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}
.bp-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
}
.bp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
.bp-card-img {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
    display: block;
    background: #f3f4f6;
}
.bp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}
.bp-card:hover .bp-card-img img { transform: scale(1.06); }
.bp-card-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    background: var(--primary);
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.bp-card-body {
    padding: 18px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.bp-card-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 44px;
}
.bp-card-title a { color: inherit; text-decoration: none; transition: color 0.15s; }
.bp-card-title a:hover { color: var(--primary); }
.bp-card-excerpt {
    font-size: 13.5px;
    color: #6b7280;
    line-height: 1.6;
    margin: 0 0 14px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.bp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
    font-size: 12px;
    color: #9ca3af;
}
.bp-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.bp-card-meta i { font-size: 11px; color: var(--primary); }

/* Pagination */
.bp-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 0;
}
.bp-page-info { font-size: 13px; color: #6b7280; }

/* Empty state */
.bp-empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.bp-empty i { font-size: 56px; color: #d1d5db; margin-bottom: 16px; }
.bp-empty h4 { font-size: 18px; font-weight: 600; color: #374151; margin: 0 0 8px 0; }
.bp-empty p { color: #6b7280; margin: 0 0 20px 0; }
.bp-empty-btn {
    display: inline-block;
    padding: 10px 22px;
    background: var(--primary);
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
}
.bp-empty-btn:hover { filter: brightness(1.08); }

@media (max-width: 991px) {
    .bp-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .bp-hero-title { font-size: 26px; }
    .blog-pro-hero { padding: 40px 0 36px; }
}
@media (max-width: 575px) {
    .bp-grid { grid-template-columns: 1fr; gap: 16px; }
    .bp-hero-title { font-size: 22px; }
    .bp-hero-desc { font-size: 13px; }
    .bp-search-form { padding: 3px 3px 3px 16px; height: 44px; }
    .bp-search-form button { padding: 0 18px; height: 36px; font-size: 12px; }
    .blog-pro-section { padding: 24px 0 40px; }
    .bp-toolbar { flex-direction: column; align-items: flex-start; }
    .bp-card-title { font-size: 15px; height: 40px; }
}

/* ===== BLOG DETAIL PAGE ===== */
.bp-detail-section {
    padding: 24px 0 60px;
    background: #f9fafb;
}
.bp-detail-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 30px;
    margin-top: 18px;
    align-items: start;
}

/* Article */
.bp-article {
    background: #fff;
    border-radius: 12px;
    padding: 32px 36px 28px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    min-width: 0;            /* fix grid overflow */
}
.bp-article-cat {
    display: inline-block;
    padding: 5px 12px;
    background: #f0f5ff;
    color: var(--primary);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    margin-bottom: 14px;
    transition: all 0.15s;
}
.bp-article-cat:hover { background: var(--primary); color: #fff; }
.bp-article-title {
    font-size: 28px;
    font-weight: 800;
    color: #1f2937;
    line-height: 1.3;
    margin: 0 0 16px 0;
    letter-spacing: -0.3px;
}
.bp-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 13px;
    color: #6b7280;
}
.bp-article-meta span { display: inline-flex; align-items: center; gap: 5px; }
.bp-article-meta i { color: var(--primary); font-size: 12px; }

.bp-article-cover {
    margin: 0 -36px 24px;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f3f4f6;
}
.bp-article-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Content area — force tất cả phần tử trong content fit width */
.bp-article-content {
    color: #374151;
    font-size: 15px;
    line-height: 1.75;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.bp-article-content * { max-width: 100%; }
.bp-article-content img,
.bp-article-content video,
.bp-article-content iframe {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 18px auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.bp-article-content iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}
.bp-article-content table {
    max-width: 100%;
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    overflow-x: auto;
    display: block;
}
.bp-article-content pre,
.bp-article-content code {
    background: #f3f4f6;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 13px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
.bp-article-content pre {
    padding: 14px 16px;
    margin: 16px 0;
}
.bp-article-content h1, .bp-article-content h2, .bp-article-content h3,
.bp-article-content h4, .bp-article-content h5, .bp-article-content h6 {
    color: #1f2937;
    font-weight: 700;
    margin-top: 28px;
    margin-bottom: 12px;
    line-height: 1.35;
}
.bp-article-content h1 { font-size: 24px; }
.bp-article-content h2 { font-size: 21px; }
.bp-article-content h3 { font-size: 18px; }
.bp-article-content h4 { font-size: 16px; }
.bp-article-content p { margin: 0 0 14px 0; }
.bp-article-content a { color: var(--primary); text-decoration: underline; }
.bp-article-content a:hover { filter: brightness(0.9); }
.bp-article-content ul, .bp-article-content ol {
    margin: 12px 0 14px 24px;
    padding: 0;
}
.bp-article-content li { margin-bottom: 6px; }
.bp-article-content blockquote {
    border-left: 4px solid var(--primary);
    background: #f9fafb;
    padding: 12px 18px;
    margin: 18px 0;
    color: #4b5563;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

/* Article footer (share + back) */
.bp-article-footer {
    margin-top: 32px;
    padding-top: 22px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.bp-article-share {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.bp-share-label { color: #6b7280; font-weight: 500; margin-right: 4px; }
.bp-article-share a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #4b5563;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.15s;
    font-size: 13px;
}
.bp-article-share a:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}
.bp-article-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f3f4f6;
    color: #374151;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
}
.bp-article-back:hover { background: var(--primary); color: #fff; }

/* Sidebar */
.bp-detail-sidebar {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.bp-sidebar-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.bp-sidebar-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bp-sidebar-title i { color: var(--primary); font-size: 13px; }

/* Popular posts */
.bp-popular-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bp-popular-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.bp-popular-img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
}
.bp-popular-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.bp-popular-list li:hover .bp-popular-img img { transform: scale(1.06); }
.bp-popular-body { flex: 1; min-width: 0; }
.bp-popular-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    margin-bottom: 4px;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bp-popular-title:hover { color: var(--primary); }
.bp-popular-cat {
    display: inline-block;
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

/* Sidebar cats */
.bp-sidebar-cats {
    list-style: none;
    margin: 0;
    padding: 0;
}
.bp-sidebar-cats li { margin: 0; }
.bp-sidebar-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    color: #4b5563;
    text-decoration: none;
    font-size: 13px;
    border-radius: 6px;
    transition: all 0.15s;
}
.bp-sidebar-cats a:hover,
.bp-sidebar-cats a.is-current {
    background: #f0f5ff;
    color: var(--primary);
    font-weight: 600;
}
.bp-sidebar-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
    height: 18px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
}
.bp-sidebar-cats a:hover .bp-sidebar-cat-count,
.bp-sidebar-cats a.is-current .bp-sidebar-cat-count {
    background: var(--primary);
    color: #fff;
}

/* Mobile blog detail */
@media (max-width: 991px) {
    .bp-detail-grid { grid-template-columns: 1fr; gap: 18px; }
    .bp-article { padding: 24px 22px; }
    .bp-article-cover { margin: 0 -22px 18px; }
    .bp-article-title { font-size: 22px; }
    .bp-detail-sidebar { position: static; }
}
@media (max-width: 575px) {
    .bp-detail-section { padding: 16px 0 40px; }
    .bp-article { padding: 20px 16px; }
    .bp-article-cover { margin: 0 -16px 16px; }
    .bp-article-title { font-size: 19px; }
    .bp-article-content { font-size: 14px; line-height: 1.7; }
    .bp-article-footer { flex-direction: column; align-items: flex-start; }
}

/* ===== FOOTER PRO (light theme) ===== */
.footer-pro {
    background: linear-gradient(180deg, #fafafa, #f3f4f6) !important;
    color: #4b5563;
    padding: 56px 0 0;
    margin-top: 40px;
    border-top: 1px solid #e5e7eb;
}
/* Reset main.css legacy footer rules */
.footer-pro .footer-links {
    display: block !important;
    grid-template-columns: none !important;
    grid-gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.footer-pro .footer-links li {
    margin: 0 0 10px 0 !important;
}
.footer-pro .footer-bottom {
    margin-top: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 18px 0 !important;
    border-top: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-pro .footer-title {
    border-bottom: none !important;
    padding-bottom: 10px !important;
}
.footer-pro .footer-contact li {
    border-bottom: none !important;
    padding: 0 !important;
}
.footer-pro .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    padding-bottom: 36px;
}
.footer-col-brand .footer-logo {
    display: inline-block;
    margin-bottom: 14px;
}
.footer-col-brand .footer-logo img {
    max-height: 38px;
    width: auto;
}
.footer-pro .footer-desc {
    font-size: 13px;
    line-height: 1.65;
    color: #6b7280;
    margin: 0 0 18px 0;
    max-width: 320px;
}
.footer-pro .footer-social {
    display: flex;
    gap: 8px;
}
.footer-pro .footer-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.footer-pro .footer-social a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    filter: brightness(1.08);
}
/* Brand colors — FA icons trên colored bubble */
.footer-pro .footer-social a[title="Line"]      { background: #06c755; }
.footer-pro .footer-social a[title="YouTube"]   { background: #ff0000; }
.footer-pro .footer-social a[title="Instagram"] { background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.footer-pro .footer-social a[title="TikTok"]    { background: #000; }
.footer-pro .footer-social a[title="Twitter"]   { background: #000; }
.footer-pro .footer-social a[title="LinkedIn"]  { background: #0a66c2; }
.footer-pro .footer-social a[title="Discord"]   { background: #5865f2; }
.footer-pro .footer-social a[title="Threads"]   { background: #000; }
/* Image-based social icons (Messenger/Zalo/Telegram) — bg trắng, ảnh contain padding tròn */
.footer-pro .footer-social a.footer-social-img {
    padding: 0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.footer-pro .footer-social a.footer-social-img img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}
.footer-pro .footer-title {
    font-size: 13px;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 18px 0;
    position: relative;
    padding-bottom: 10px;
}
.footer-pro .footer-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}

.footer-pro .footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-pro .footer-links li {
    margin: 0 0 10px 0;
    padding: 0;
}
.footer-pro .footer-links a {
    color: #6b7280;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s, padding-left 0.15s;
    display: inline-block;
    position: relative;
}
.footer-pro .footer-links a:hover {
    color: var(--primary);
    padding-left: 4px;
}
.footer-pro .footer-links a::before {
    content: "›";
    margin-right: 6px;
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.15s;
}
.footer-pro .footer-links a:hover::before { opacity: 1; }

.footer-pro .footer-contact {
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-pro .footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}
.footer-pro .footer-contact li i {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--primary);
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}
.footer-pro .footer-contact a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}
.footer-pro .footer-contact a:hover { color: var(--primary); }

/* Bottom bar styles (rules chính ở phần override main.css ở trên) */
.footer-pro .footer-copy {
    margin: 0;
    font-size: 12.5px;
    color: #6b7280;
}
.footer-pro .footer-copy strong {
    color: #1f2937;
    font-weight: 600;
}
.footer-pro .footer-payments {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.footer-pro .footer-payments img {
    height: 24px;
    width: auto;
    opacity: 0.85;
    transition: opacity 0.15s;
}
.footer-pro .footer-payments img:hover { opacity: 1; }

/* Mobile responsive — compact spacing */
@media (max-width: 991px) {
    .footer-pro { padding: 28px 0 0; margin-top: 24px; }
    .footer-pro .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 20px;
        padding-bottom: 18px;
    }
    .footer-pro .footer-title { margin: 0 0 10px 0; padding-bottom: 6px; font-size: 12.5px; }
    .footer-pro .footer-title::after { width: 24px; }
    .footer-pro .footer-links li { margin: 0 0 6px 0 !important; }
    .footer-pro .footer-contact li { margin: 0 0 8px 0; }
    .footer-pro .footer-bottom { padding: 12px 0 !important; }
}
@media (max-width: 575px) {
    .footer-pro { padding: 22px 0 0; margin-top: 20px; }
    .footer-col-brand { grid-column: 1 / -1; }       /* Brand col span full row */
    .footer-pro .footer-grid {
        grid-template-columns: repeat(2, 1fr);       /* giữ 2 col trừ brand */
        gap: 14px 18px;
    }
    .footer-pro .footer-desc { margin: 0 0 10px 0; max-width: none; }
    .footer-pro .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .footer-pro .footer-payments img { height: 20px; }
}

/* ===== HEADER TOP BAR ===== */
.header-top {
    background: var(--primary);
    font-size: 12.5px;
    color: #fff;
    padding: 0;
}
.header-top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;        /* không xuống dòng trên desktop */
    gap: 16px;
    padding: 8px 0;
    min-height: 38px;
}
.header-top-welcome {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    flex: 1 1 0;
    min-width: 0;             /* cho phép shrink dưới content size */
    overflow: hidden;
}
.header-top-welcome i {
    color: #fbbf24;
    font-size: 13px;
    flex-shrink: 0;
}
.header-top-welcome span {
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* dài thì ... thay vì wrap */
}
.header-top-welcome a {
    color: #fde68a;
    text-decoration: underline;
}

.header-top-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;            /* right side luôn full size */
    white-space: nowrap;
}

.header-top .header-top-list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-top .header-top-list li {
    margin: 0;
    padding: 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    line-height: 1.2;
}
.header-top .header-top-list li:last-child { border-right: none; padding-right: 0; }
.header-top .header-top-list li:first-child { padding-left: 0; }
.header-top .header-top-list a {
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.15s;
    line-height: 1.2;
}
.header-top .header-top-list a:hover { opacity: 0.8; }
.header-top .header-top-list a i { font-size: 11.5px; }

.header-top .header-top-select {
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-top .header-select {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    white-space: nowrap;
    position: relative;
}
.header-top .header-select > i {
    color: #fff;
    font-size: 12px;
}
/* Flag image cho language selector */
.header-top .header-flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
    flex-shrink: 0;
}

/* Custom flag dropdown (header) */
.header-flag-dropdown {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.header-flag-dropdown .hfd-trigger {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    transition: opacity 0.15s;
}
.header-flag-dropdown .hfd-trigger:hover { opacity: 0.85; }
.header-flag-dropdown .hfd-label { color: #fff; }
.header-flag-dropdown .hfd-caret {
    font-size: 9px;
    margin-left: 2px;
    transition: transform 0.15s;
}
.header-flag-dropdown .hfd-list.open + ul,
.header-flag-dropdown:has(.hfd-list.open) .hfd-caret { transform: rotate(180deg); }
.header-flag-dropdown .hfd-list {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    list-style: none;
    padding: 6px;
    margin: 0;
    min-width: 170px;
    z-index: 200;
}
.header-flag-dropdown .hfd-list.open { display: block; }
.header-flag-dropdown .hfd-list li {
    padding: 8px 12px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}
.header-flag-dropdown .hfd-list li:hover {
    background: #f0f5ff;
    color: var(--primary);
}
.header-flag-dropdown .hfd-list li.is-active {
    background: #f0f5ff;
    color: var(--primary);
    font-weight: 700;
}
/* flag-icons: span.fi.fi-xx — dùng background SVG, cần kích thước fixed */
.header-flag-dropdown .hfd-flag.fi {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25);
}
.header-flag-dropdown .hfd-list li .hfd-flag.fi {
    width: 22px;
    height: 16px;
    box-shadow: 0 0 0 1px #e5e7eb;
}
/* Currency picker container — override .header-select (width:100%) từ main.css */
.header-top .header-select.header-select-currency {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    padding: 0;
    line-height: 1;
}
/* Currency symbol (đ / $ / €) — text thay icon */
.header-top .header-currency-symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.header-top .header-select.header-select-currency > i.fa-money-bill-wave {
    color: #fff;
    font-size: 13px;
    margin: 0;
}
/* Currency dropdown: fallback FA icon trong trigger (khi không có symbol_left/right) */
.header-flag-dropdown.header-currency-dropdown .hfd-currency-fallback {
    color: #fff;
    font-size: 13px;
}
/* Symbol pill trong dropdown list — bg sáng, chữ primary; hover/active đảo màu */
.header-flag-dropdown .hfd-list li .hfd-currency-sym {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #f0f5ff;
    color: var(--primary);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}
.header-flag-dropdown .hfd-list li:hover .hfd-currency-sym,
.header-flag-dropdown .hfd-list li.is-active .hfd-currency-sym {
    background: var(--primary);
    color: #fff;
}
/* Native styled select — render instant, không cần JS, không flash */
.header-top .header-native-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1.2;
    padding: 0 18px 0 0;
    margin: 0;
    cursor: pointer;
    outline: none;
    /* Custom arrow ▾ qua background SVG (trắng tinh) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5' fill='none'><path d='M1 1L4 4L7 1' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right center;
}
.header-top .header-native-select:hover { opacity: 0.8; }
.header-top .header-native-select:focus { color: #fff; }
/* Option (dropdown khi click) — bg trắng, chữ tối */
.header-top .header-native-select option {
    color: #1f2937;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
}

/* Mobile: ẩn welcome notice + collapse list */
@media (max-width: 767px) {
    .header-top-inner { padding: 6px 0; gap: 6px 12px; }
    .header-top-welcome { display: none; }
    .header-top-right { margin-left: 0; gap: 12px; width: 100%; justify-content: space-between; }
    .header-top .header-top-list li { padding: 0 8px; }
    .header-top .header-top-list a span,
    .header-top .header-top-list a {
        font-size: 11.5px;
    }
}
@media (max-width: 480px) {
    .header-top .header-top-list li i { display: none; }
    .header-top .header-select { gap: 4px; }
}

/* ===== CHECKOUT MODAL ===== */
.checkout-modal {
    padding: 22px 24px 24px;
    font-family: inherit;
}
.checkout-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 30px;
    height: 30px;
    background: #f3f4f6;
    color: #6b7280;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: all 0.15s;
}
.checkout-modal-close:hover { background: #ef4444; color: #fff; }

.checkout-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #f3f4f6;
}
.checkout-header i { color: var(--primary); font-size: 18px; }

/* Product summary */
.checkout-product {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 16px;
}
.checkout-product-img {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 22px;
}
.checkout-product-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.checkout-product-info { flex: 1; min-width: 0; }
.checkout-product-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}
.checkout-product-name:hover { color: var(--primary); }
.checkout-product-meta {
    display: flex;
    gap: 12px;
    font-size: 11.5px;
    color: #6b7280;
}
.checkout-product-meta .cm-price { color: #ef4444; font-weight: 700; }
.checkout-product-meta .cm-stock i { font-size: 7px; color: #10b981; margin-right: 2px; }

/* Form rows */
.checkout-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.checkout-form-row label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}
.checkout-form-row label .req { color: #ef4444; }

.checkout-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}
.checkout-qty button {
    width: 32px;
    height: 32px;
    background: #fff;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s;
}
.checkout-qty button:hover { background: #f3f4f6; color: var(--primary); }
.checkout-qty input {
    width: 56px;
    height: 32px;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    background: #fff;
    -moz-appearance: textfield;
    appearance: textfield;
}
.checkout-qty input::-webkit-outer-spin-button,
.checkout-qty input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.checkout-coupon {
    flex: 1;
    max-width: 200px;
    padding: 7px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
}
.checkout-coupon:focus { outline: none; border-color: var(--primary); }

/* Hot deal */
.checkout-hot-deal {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 8px;
    margin-bottom: 14px;
}
.checkout-hot-deal > i { color: #ef4444; font-size: 16px; margin-top: 2px; }
.checkout-hot-deal > div { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #92400e; }
.checkout-hot-deal strong { color: #ef4444; font-size: 12.5px; }
.checkout-hot-deal b { color: #dc2626; }

/* Summary */
.checkout-summary {
    padding: 12px 14px;
    background: #fafafa;
    border-radius: 8px;
    margin-bottom: 14px;
}
.cs-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
    color: #4b5563;
}
.cs-row strong { color: #1f2937; font-weight: 600; }
.cs-row .discount-line { color: #10b981; }
.cs-total {
    border-top: 1px dashed #d1d5db;
    margin-top: 4px;
    padding-top: 10px;
    font-size: 14px;
}
.cs-total span { font-weight: 700; color: #1f2937; }
.cs-total strong { color: #ef4444; font-size: 18px; font-weight: 800; }

/* Balance card */
.checkout-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #f0f5ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    margin-bottom: 16px;
}
.cb-info { display: flex; align-items: center; gap: 10px; }
.cb-info > i { color: var(--primary); font-size: 18px; }
.cb-label { display: block; font-size: 11.5px; color: #6b7280; line-height: 1.2; }
.cb-amount { font-size: 14px; font-weight: 700; color: #1f2937; }
.cb-status {
    font-size: 11.5px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cb-status.is-enough { color: #10b981; }
.cb-status.is-not-enough { color: #ef4444; }

/* CTA pay button */
.btn-checkout-pay {
    width: 100%;
    padding: 13px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: filter 0.15s, box-shadow 0.15s;
}
.btn-checkout-pay:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.btn-checkout-pay:disabled { background: #d1d5db; color: #6b7280; cursor: not-allowed; }
.btn-checkout-pay.is-recharge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Mobile modal */
@media (max-width: 575px) {
    .checkout-modal { padding: 18px 16px; }
    .checkout-form-row { flex-direction: column; align-items: stretch; gap: 6px; }
    .checkout-coupon { max-width: 100%; }
}

/* =====================================================================
   CHECKOUT MODAL V2 — 2-column layout (left product info, right form)
===================================================================== */
.checkout-modal-shell { border-radius: 18px; overflow: hidden; border: none; }

.checkout-modal-v2 {
    font-family: inherit;
    background: #fff;
    position: relative;
}

.checkout-header-v2 {
    background: linear-gradient(135deg, var(--primary, #2563eb) 0%, #1e40af 100%);
    color: #fff;
    padding: 18px 26px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.checkout-header-v2 i { font-size: 18px; opacity: 0.95; }

.checkout-grid {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 1.05fr;
    gap: 0;
}

/* ===== LEFT: product info ===== */
.checkout-left {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 24px 22px;
    border-right: 1px solid #e5e7eb;
}
.checkout-product-card { display: flex; flex-direction: column; gap: 14px; }

.checkout-product-img-large {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
}
.checkout-product-img-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.checkout-img-placeholder {
    color: #cbd5e1;
    font-size: 60px;
}

.checkout-product-detail { display: flex; flex-direction: column; gap: 10px; }

.checkout-product-name-v2 {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.4;
    text-decoration: none !important;
    transition: color 0.15s;
}
.checkout-product-name-v2:hover { color: var(--primary, #2563eb); }

.checkout-variant-tag-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(99, 102, 241, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 500;
    align-self: flex-start;
}
.checkout-variant-tag-v2 strong { font-weight: 700; }
.checkout-variant-tag-v2 i { font-size: 11px; }

.checkout-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}
.meta-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.meta-card-label {
    font-size: 11px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.meta-card-value {
    font-size: 15px;
    color: #1f2937;
    font-weight: 700;
}
.meta-stock-val { color: #059669; }

.checkout-hot-deal-v2 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fbbf24;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 4px;
}
.hot-deal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #92400e;
    font-size: 13px;
    margin-bottom: 6px;
}
.hot-deal-head i { color: #f59e0b; font-size: 14px; }
.checkout-hot-deal-v2 ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #78350f;
}
.checkout-hot-deal-v2 ul li {
    padding: 3px 0;
    border-top: 1px dashed rgba(251, 191, 36, 0.5);
}
.checkout-hot-deal-v2 ul li:first-child { border-top: none; }
.checkout-hot-deal-v2 b { color: #92400e; }

/* ===== RIGHT: form + summary ===== */
.checkout-right {
    padding: 24px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checkout-form-row-v2 { display: flex; flex-direction: column; gap: 6px; }
.checkout-form-row-v2 label {
    font-size: 13px;
    color: #374151;
    font-weight: 600;
    margin: 0;
}
.checkout-form-row-v2 .req { color: #ef4444; }

.checkout-qty-v2 {
    display: flex;
    align-items: center;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    width: fit-content;
    background: #fff;
}
.checkout-qty-v2 button {
    background: #f9fafb;
    border: none;
    width: 42px;
    height: 42px;
    cursor: pointer;
    color: #4b5563;
    font-size: 14px;
    transition: all 0.15s;
}
.checkout-qty-v2 button:hover {
    background: var(--primary, #2563eb);
    color: #fff;
}
.checkout-qty-v2 .action-input {
    width: 70px;
    text-align: center;
    border: none;
    border-left: 1.5px solid #e5e7eb;
    border-right: 1.5px solid #e5e7eb;
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    height: 42px;
    background: #fff;
    -moz-appearance: textfield;
}
.checkout-qty-v2 .action-input::-webkit-outer-spin-button,
.checkout-qty-v2 .action-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.checkout-coupon-v2 {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 13.5px;
    font-family: inherit;
    transition: border-color 0.15s;
}
.checkout-coupon-v2:focus {
    outline: none;
    border-color: var(--primary, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.checkout-summary-v2 {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}
.cs-row-v2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: #4b5563;
}
.cs-row-v2 strong { font-weight: 600; color: #1f2937; }
.cs-row-v2 .discount-line { color: #ef4444; font-weight: 700; }
.cs-total-v2 {
    border-top: 1px dashed #e5e7eb;
    padding-top: 8px;
    margin-top: 2px;
    font-size: 15px;
}
.cs-total-v2 span { color: #1f2937; font-weight: 600; }
.cs-total-v2 strong {
    color: var(--primary, #2563eb);
    font-size: 18px;
    font-weight: 800;
}

.checkout-balance-v2 {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.cb-info-v2 {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cb-info-v2 > i {
    font-size: 22px;
    color: #059669;
}
.cb-label-v2 {
    display: block;
    font-size: 11px;
    color: #047857;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cb-amount-v2 {
    font-size: 15px;
    color: #047857;
    font-weight: 800;
}
.cb-status-v2 {
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 999px;
}
.cb-status-v2.is-enough,
.cb-status-v2.is-ok { background: #059669; color: #fff; }
.cb-status-v2.is-not-enough,
.cb-status-v2.is-low { background: #ef4444; color: #fff; }

.btn-checkout-pay-v2 {
    background: linear-gradient(135deg, var(--primary, #2563eb) 0%, #1e40af 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 14.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.btn-checkout-pay-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4);
}
.btn-checkout-pay-v2:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.btn-checkout-pay-v2.is-recharge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
.btn-checkout-pay-v2.is-recharge:hover {
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45);
}

/* ===== RESPONSIVE: stack 1 column on mobile/tablet ===== */
@media (max-width: 768px) {
    .checkout-grid { grid-template-columns: 1fr; }
    .checkout-left {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding: 18px 18px 16px;
    }
    .checkout-right { padding: 18px; }
    .checkout-product-img-large { aspect-ratio: 16 / 8; max-height: 180px; }
    .checkout-header-v2 { padding: 14px 18px; font-size: 14.5px; }
    .meta-card-value { font-size: 13.5px; }
    .meta-card-label { font-size: 10px; }
    .cs-total-v2 strong { font-size: 16px; }
    .btn-checkout-pay-v2 { padding: 12px; font-size: 13.5px; }
}

/* Modal-XL fits within container */
@media (min-width: 1200px) {
    .modal-xl { max-width: 1000px; }
}

/* ===== Override Bootstrap container max-width 1320 → 1200 (compact, hợp convention VN) ===== */
@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1200px;
    }
}

/* ===== PRODUCT DETAIL PAGE ===== */
.product-detail-section {
    padding: 24px 0 32px;
    background: #f0f2f5;
}
.product-hero-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 32px;
    align-items: start;
    margin-bottom: 24px;
}
.product-gallery-col,
.product-info-col {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.product-gallery-col { padding: 16px; }
.product-info-col { padding: 24px 28px; }
/* No-image placeholder */
.product-no-image {
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 10px;
    color: #9ca3af;
}
.product-no-image i { font-size: 64px; }
.product-no-image p { margin: 0; font-size: 14px; font-weight: 500; }
/* Override product-details.css — bỏ dotted border xấu, làm ảnh sạch */
.product-gallery-col .details-preview { margin-bottom: 12px; }
.product-gallery-col .details-preview li img {
    border: 1px solid #f3f4f6 !important;
    border-radius: 10px;
    background: #fafafa;
}
.product-gallery-col .details-preview li img:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.product-gallery-col .details-thumb li img {
    border-radius: 8px;
    border: 2px solid transparent !important;
}
.product-gallery-col .details-thumb .slick-current img {
    border: 2px solid var(--primary) !important;
}

/* Title row (title + wishlist heart góc phải) */
.product-title-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 12px;
}
.product-title {
    flex: 1;
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.35;
    margin: 0;
}
.btn-wishlist-corner {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #ef4444;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.15s;
}
.btn-wishlist-corner:hover {
    background: #fef2f2;
    border-color: #ef4444;
    transform: scale(1.05);
}
.btn-wishlist-corner.is-favorited {
    background: #fef2f2;
    border-color: #ef4444;
}

/* Meta row (cat / stock / sold) */
.product-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.product-meta-row .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 16px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s;
}
.product-meta-row .meta-item img {
    width: 16px; height: 16px; object-fit: contain;
}
.product-meta-row .meta-cat:hover {
    background: var(--primary);
    color: #fff;
}
.product-meta-row .meta-stock i { font-size: 8px; color: #10b981; }
.product-meta-row .meta-stock.is-out i,
.product-meta-row .meta-stock.is-out { color: #ef4444; background: #fee2e2; }
.product-meta-row .meta-sold i { color: #f59e0b; }

/* Price area — inline, không box, để layout breathe */
.product-price-box {
    margin-bottom: 16px;
    padding: 4px 0 14px;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    border-bottom: 1px solid #f3f4f6;
}
.product-price-box .price-current {
    font-size: 30px;
    font-weight: 700;
    color: #ef4444;
    line-height: 1;
    letter-spacing: -0.5px;
}
.product-price-box .price-original {
    font-size: 14px;
    color: #9ca3af;
    text-decoration: line-through;
    font-weight: 500;
}
.product-price-box .price-discount-tag {
    background: #fee2e2;
    color: #dc2626;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
}
.product-price-box .price-saved {
    flex-basis: 100%;
    font-size: 12.5px;
    color: #6b7280;
    font-weight: 500;
    margin-top: 4px;
}
.product-price-box .price-saved strong { color: #dc2626; font-weight: 700; }
.product-price-box .price-saved i { margin-right: 4px; color: #f59e0b; }

/* Short desc */
.product-short-desc {
    font-size: 13.5px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px dashed #e5e7eb;
}

/* CTA + Wishlist */
.product-cta-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
}
.btn-buy-primary {
    padding: 12px 28px;
    background: var(--primary);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter 0.15s, box-shadow 0.15s;
    text-transform: uppercase;
    letter-spacing: 0;
    white-space: nowrap;
}
.btn-buy-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.btn-buy-primary:disabled {
    background: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
    filter: none;
}
/* Delivery info card */
.product-delivery-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    margin-bottom: 14px;
}
.product-delivery-card > i {
    font-size: 24px;
    color: #10b981;
    flex-shrink: 0;
}
.product-delivery-card .delivery-title {
    font-size: 13px;
    font-weight: 700;
    color: #065f46;
}
.product-delivery-card .delivery-desc {
    font-size: 12px;
    color: #047857;
    line-height: 1.4;
}


/* Trust badges */
.product-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    padding: 14px 0;
    margin-bottom: 14px;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}
.product-trust-row .trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    color: #6b7280;
    font-size: 11.5px;
    font-weight: 500;
}
.product-trust-row .trust-item i {
    font-size: 18px;
    color: var(--primary);
}

/* Share inline */
.product-share-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
}
.product-share-inline .share-label {
    color: #6b7280;
    margin-right: 4px;
}
.product-share-inline a,
.product-share-inline .share-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 14px;
}
.product-share-inline a:hover,
.product-share-inline .share-copy-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* ===== Mobile sticky buy bar ===== */
.product-sticky-mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
    padding: 10px 14px;
    z-index: 250;
    align-items: center;
    gap: 12px;
}
.product-sticky-mobile .sticky-price-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.product-sticky-mobile .sticky-price-current {
    font-size: 17px;
    font-weight: 800;
    color: #ef4444;
}
.product-sticky-mobile .sticky-price-original {
    font-size: 12px;
    color: #9ca3af;
    text-decoration: line-through;
}
.product-sticky-mobile .sticky-buy-btn {
    flex: 1;
    padding: 12px 16px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.product-sticky-mobile .sticky-buy-btn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}

/* Description section */
.product-description-section {
    padding: 0 0 32px;
    background: #f0f2f5;
}
.product-description-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
}
.product-description-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid #f3f4f6;
    flex-wrap: wrap;
    gap: 10px;
}
.product-description-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.product-description-header h2 i { color: var(--primary); }
.api-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f3f4f6;
    color: #6b7280;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}
.api-doc-link:hover {
    background: var(--primary);
    color: #fff;
}
.product-description-card .product-details-frame {
    padding: 24px;
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
}

/* Responsive product page */
@media (max-width: 991px) {
    .product-hero-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .product-info-col { padding: 20px; }
    .product-trust-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .product-detail-section { padding: 16px 0 80px; }  /* extra bottom for sticky bar */
    .product-title { font-size: 18px; }
    .product-price-box { padding: 14px 16px; }
    .product-price-box .price-current { font-size: 24px; }
    .product-sticky-mobile { display: flex; }
}

/* ===== CATEGORY PAGE ===== */
/* Breadcrumb */
.divine-breadcrumb {
    background: #fff;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 14px;
    font-size: 13px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.divine-breadcrumb a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.15s;
}
.divine-breadcrumb a:hover { color: var(--primary); }
.divine-breadcrumb .sep { color: #d1d5db; font-weight: 500; }
.divine-breadcrumb .current {
    color: var(--primary);
    font-weight: 700;
    background: #f0f5ff;
    padding: 3px 10px;
    border-radius: 6px;
}
.divine-breadcrumb .cat-count-inline {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary);
    background: #f0f5ff;
    padding: 3px 10px;
    border-radius: 12px;
}

/* Subcategory pills */
.divine-subcat-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.subcat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fff;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
}
.subcat-pill img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.subcat-pill:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.subcat-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.subcat-pill .pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    padding: 0 6px;
    height: 18px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
    border-radius: 9px;
    margin-left: 4px;
}
.subcat-pill:hover .pill-count {
    background: rgba(99, 102, 241, 0.15);
    color: var(--primary);
}
.subcat-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Sort bar */
.divine-sort-bar {
    background: #fff;
    border-radius: 10px;
    padding: 10px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sort-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin-right: 6px;
}
.sort-link {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s;
    border: 1px solid transparent;
}
.sort-link:hover {
    background: #f0f5ff;
    color: var(--primary);
}
.sort-link.active {
    background: var(--primary);
    color: #fff;
}

/* Empty state */
.divine-empty-state {
    text-align: center;
    padding: 60px 20px;
}
.divine-empty-state i {
    font-size: 64px;
    color: #d1d5db;
    margin-bottom: 16px;
}
.divine-empty-state h4 {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 8px 0;
}
.divine-empty-state p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
}
.btn-empty-back {
    display: inline-block;
    padding: 10px 24px;
    background: var(--primary);
    color: #fff !important;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13.5px;
    transition: filter 0.15s;
}
.btn-empty-back:hover { filter: brightness(1.1); }

/* Mobile category page */
@media (max-width: 575px) {
    .divine-breadcrumb { padding: 10px 14px; font-size: 12px; }
    .divine-breadcrumb .cat-count-inline { display: none; }
    .divine-sort-bar { padding: 8px 12px; }
    .sort-link { padding: 5px 10px; font-size: 11.5px; }
}

/* --- Notice Banner --- */
.divine-notice {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #92400e;
}

/* --- Search Results Header --- */
.divine-search-header {
    background: #fff;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.divine-search-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}
.divine-search-header h3 strong {
    color: #ef4444;
}

/* --- Pagination --- */
.divine-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 0;
    margin-top: 8px;
}
.divine-pagination .page-info {
    font-size: 13px;
    color: #6b7280;
}

/* ==========================================================
   RESPONSIVE — Home page (refined)
   Breakpoints: 1199 / 991 / 767 / 575 / 380
   ========================================================== */

/* --- Desktop nhỏ (≤1199): nén right col, recompute row1 cho khớp 2 banner phải --- */
/* right col 240px × aspect 148/284 = 125, ×2 + gap 10 = 260 → row1 = 260 */
@media (max-width: 1199px) {
    .divine-hero-grid {
        grid-template-columns: 200px 1fr 240px;
        grid-template-rows: 260px auto;
        gap: 12px;
    }
    .divine-cat-sidebar { max-height: 400px; }
    .divine-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .divine-section-header h3 { font-size: 20px; }
}

/* --- Laptop (≤1099): right col 220 → row1 = 224 --- */
@media (max-width: 1099px) {
    .divine-hero-grid {
        grid-template-columns: 190px 1fr 220px;
        grid-template-rows: 240px auto;
    }
    .divine-cat-sidebar { max-height: 380px; }
}

/* --- Tablet (≤991): hero stack 1-col, sidebar → strip ngang --- */
@media (max-width: 991px) {
    .divine-hero-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas: none;
        gap: 12px;
        margin-bottom: 12px;
    }
    /* Override grid-area children — areas: none nên named area invalid → auto-place */
    .divine-hero-grid > * {
        grid-area: auto !important;
        grid-column: 1 !important;
        width: 100%;
        min-width: 0;
    }

    /* Sidebar danh mục → cuộn ngang dạng pill */
    .divine-cat-sidebar {
        max-height: none;
        display: flex;
        flex-direction: column;
    }
    .divine-cat-header {
        font-size: 12.5px;
        padding: 8px 14px;
    }
    .divine-cat-list {
        display: flex;
        flex-direction: row;
        flex: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 10px 12px;
        gap: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .divine-cat-list::-webkit-scrollbar { display: none; }
    .divine-cat-list li { flex: 0 0 auto; }
    .divine-cat-link {
        flex-direction: column;
        gap: 4px;
        padding: 8px 10px;
        font-size: 11px;
        text-align: center;
        min-width: 72px;
        max-width: 96px;
        border: 1px solid #e5e7eb;
        border-left: 1px solid #e5e7eb;
        border-radius: 8px;
        line-height: 1.25;
    }
    .divine-cat-link:hover,
    .divine-cat-link.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
    }
    .divine-cat-link:hover .cat-icon-fa,
    .divine-cat-link.active .cat-icon-fa { color: #fff; }
    .divine-cat-link span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    .cat-icon-img,
    .divine-cat-link .cat-icon-fa { width: 28px; height: 28px; font-size: 16px; line-height: 28px; }

    /* Carousel: fixed height ở tablet (grid stacked nên không có row height auto) */
    .divine-banner-center { height: 240px; }
    .divine-banner-main .carousel-control-prev,
    .divine-banner-main .carousel-control-next { opacity: 1; }

    /* Right banners: 2 col ngang, chia đôi width */
    .divine-banner-right {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }
    .divine-right-banner {
        flex: 1;
        width: auto;
        height: auto;
        aspect-ratio: 284/148;
    }

    /* Sub-banner ở tablet vẫn giữ 4 cột (đủ rộng) */
    .divine-sub-banner-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    /* Product 3 col ở tablet (mượt hơn jump 4→2) */
    .divine-product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    /* Section header thu nhỏ */
    .divine-section-header {
        margin-bottom: 16px;
        padding-bottom: 10px;
    }
    .divine-section-header h3 { font-size: 18px; }
    .divine-section-header h3 img { width: 24px; height: 24px; }
    .divine-section-header .divine-explore-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Subcat pills: cuộn ngang, không wrap */
    .divine-subcat-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .divine-subcat-pills::-webkit-scrollbar { display: none; }
    .subcat-pill { flex-shrink: 0; }

    /* Sort bar cuộn ngang nếu nhiều option */
    .divine-sort-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .divine-sort-bar::-webkit-scrollbar { display: none; }
    .sort-link, .sort-label { flex-shrink: 0; white-space: nowrap; }

    .divine-category-block { padding: 18px; margin-bottom: 16px; }

    /* Sticky banner đã ẩn ở 1599px nhưng giữ rule cho rõ */
    .divine-sticky-left,
    .divine-sticky-right { display: none; }
}

/* --- Mobile (≤767): match reference DivineShop mobile layout --- */
@media (max-width: 767px) {
    /* Hero-grid: chuyển sang flex column ở mobile cho đơn giản, tránh grid edge cases */
    .divine-hero-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
        margin-bottom: 12px;
        grid-template-columns: none;
        grid-template-rows: none;
        grid-template-areas: none;
    }
    .divine-hero-grid > * {
        grid-area: auto;
        width: 100%;
    }

    /* Ẩn pills strip danh mục — đã có hamburger menu trên header */
    .divine-cat-sidebar { display: none !important; }

    /* Carousel: dùng vw để banner mobile scale theo viewport, max cap 220px */
    .divine-banner-center {
        height: 50vw !important;
        max-height: 220px;
        min-height: 150px;
        aspect-ratio: auto;
        border-radius: 12px;
        width: 100%;
    }

    /* Right-banner: 2-col grid, override flex từ 991 */
    .divine-banner-right {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        flex-direction: unset;
        gap: 10px;
        width: 100%;
    }
    .divine-right-banner {
        flex: none;
        width: 100%;
        height: auto;
        aspect-ratio: 284 / 148;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .divine-right-banner img { width: 100%; height: 100%; object-fit: cover; }

    /* Sub-banner: 2-col grid, cùng style với right-banner */
    .divine-sub-banner-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }
    .divine-sub-banner-item {
        width: 100%;
        aspect-ratio: 284 / 148;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    /* Product 2-col */
    .divine-product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Recent popup: ẩn trên mobile vì che màn hình */
    .divine-recent-popup { display: none !important; }

    /* Nav sidebar dropdown: hiện khi .open */
    .nav-sidebar .dropdown-list.open { display: block !important; }
    .nav-sidebar .dropdown-link.expanded::after {
        transform: translateY(-50%) rotate(180deg);
    }
}

/* --- Mobile (≤575): compact toàn diện --- */
@media (max-width: 575px) {
    .divine-home .section.feature-part { padding-top: 12px; }
    .divine-hero-grid { gap: 10px; margin-bottom: 10px; }

    /* Carousel: aspect-ratio đã handle ở 767, không lock height nữa */

    .divine-product-grid { gap: 10px; }
    .divine-product-card .card-body-divine { padding: 10px 10px 12px; }
    .divine-product-card .card-title-divine {
        font-size: 13px;
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        line-height: 1.35;
    }
    .divine-product-card .card-meta { font-size: 11px; gap: 6px; }
    .divine-product-card .card-subcat-tag {
        font-size: 10px;
        padding: 2px 6px;
        margin-bottom: 4px;
    }
    .divine-product-card .price-current { font-size: 14px; }
    .divine-product-card .price-original { font-size: 11.5px; }
    .divine-product-card .price-discount-badge { font-size: 10px; padding: 1px 5px; }
    .divine-product-card .card-price-area { gap: 6px; height: 24px; }

    .divine-category-block { padding: 14px; margin-bottom: 14px; }
    .divine-section-header { margin-bottom: 12px; padding-bottom: 8px; }
    .divine-section-header h3 { font-size: 16px; gap: 8px; }
    .divine-section-header h3 img { width: 22px; height: 22px; }
    .divine-section-header .divine-explore-btn {
        padding: 5px 10px;
        font-size: 11.5px;
    }

    .divine-sub-banner-row { gap: 8px; }

    /* Notice banner */
    .divine-notice { padding: 10px 14px; font-size: 13px; }

    /* Search results header */
    .divine-search-header { padding: 12px 16px; }
    .divine-search-header h3 { font-size: 15px; }

    /* Recent popup: ẩn trên mobile vì che màn hình */
    .divine-recent-popup { display: none !important; }

    /* View more link */
    .divine-view-more { padding: 10px; font-size: 13px; }

    /* Pagination thu nhỏ */
    .divine-pagination { flex-direction: column; gap: 8px; padding: 12px 0; }
    .divine-pagination .page-info { font-size: 12px; }
}

/* --- Mobile siêu nhỏ (≤380): nếu cần --- */
@media (max-width: 380px) {
    .divine-product-grid { gap: 8px; }
    .divine-product-card .card-body-divine { padding: 8px 8px 10px; }
    .divine-section-header h3 { font-size: 15px; }
    /* Carousel aspect-ratio đã handle */
}

/* ==========================================================
   Widget tools (4 ô shortcut tool) — fix padding huge ở mobile
   override main.css `.box-product-main { padding: 0 40px }`
   ========================================================== */
@media (max-width: 1199px) {
    .all-product-main .box-product-main { padding: 0 22px; }
}
@media (max-width: 991px) {
    .all-product-main .box-product-main {
        padding: 0 18px;
        height: 92px;
    }
    .box-img-product { height: 60px; width: 60px; margin-right: 12px; }
    .box-img-product img { width: 36px !important; height: 36px !important; }
    .box-text-style div:first-child { font-size: 15px !important; }
    .box-text-style div:last-child { font-size: 13px !important; }
}
@media (max-width: 575px) {
    .all-product-main .box-product-main {
        padding: 0 14px;
        height: 80px;
        border-radius: 10px;
    }
    .box-img-product { height: 50px; width: 50px; margin-right: 10px; border-radius: 10px; }
    .box-img-product img { width: 30px !important; height: 30px !important; }
    .box-text-style div:first-child { font-size: 13.5px !important; }
    .box-text-style div:last-child { font-size: 11.5px !important; }
}

/* ==========================================================
   MOBILE SIDEBAR DRAWER (.nav-sidebar.ms-drawer) — Pro version
   Override main.css cũ, design hiện đại Shopee/TIKI-style
   ========================================================== */
.ms-drawer {
    width: 320px !important;
    max-width: 85vw !important;
    left: -340px;
    background: #fff !important;
    display: flex;
    flex-direction: column;
    box-shadow: 8px 0 30px rgba(0,0,0,0.18) !important;
}
.ms-drawer.active { left: 0 !important; }

/* Header: logo + close button, clean white */
.ms-drawer .ms-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px !important;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
    background: #fff !important;
    text-align: left !important;
    position: relative;
}
.ms-drawer .ms-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 1;
    min-width: 0;
}
.ms-drawer .ms-logo img {
    height: 34px !important;
    width: auto !important;
    max-width: 200px;
    display: block;
    object-fit: contain;
}
.ms-drawer .ms-close-btn {
    position: static !important;
    transform: none !important;
    width: 36px;
    height: 36px;
    border: none;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 50%;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    flex-shrink: 0;
    transition: all 0.18s;
    box-shadow: none;
    text-shadow: none;
}
.ms-drawer .ms-close-btn:hover {
    background: #fee2e2;
    color: #dc2626;
    transform: rotate(90deg) !important;
}
.ms-drawer .ms-close-btn i { line-height: 1; }

.ms-drawer .ms-content {
    padding: 0 !important;
    overflow-y: auto !important;
    max-height: none !important;
    flex: 1;
    min-height: 0;
    background: #fff;
}

/* User card (logged in) — solid primary với subtle pattern */
.ms-drawer .ms-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 60%, #818cf8 100%);
    color: #fff;
    margin: 0;
    position: relative;
    overflow: hidden;
}
.ms-drawer .ms-user-card::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255,255,255,0.15), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.ms-drawer .ms-user-card > * { position: relative; z-index: 1; }
.ms-drawer .ms-user-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    border: 2px solid rgba(255,255,255,0.5);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.ms-drawer .ms-user-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}
.ms-drawer .ms-user-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
}
.ms-drawer .ms-user-meta {
    flex: 1;
    min-width: 0;
}
.ms-drawer .ms-user-name {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
    letter-spacing: 0.2px;
}
.ms-drawer .ms-user-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.95);
    background: rgba(255,255,255,0.15);
    padding: 3px 10px;
    border-radius: 12px;
    backdrop-filter: blur(4px);
}
.ms-drawer .ms-user-balance i { font-size: 11px; opacity: 0.9; }
.ms-drawer .ms-user-balance strong { font-weight: 700; color: #fff; }
.ms-drawer .ms-user-cta {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.18s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.ms-drawer .ms-user-cta:hover {
    transform: scale(1.1) rotate(90deg);
    color: var(--primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}

/* Auth card (not logged in) — 2 buttons cùng row */
.ms-drawer .ms-auth-card {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid #f1f5f9;
}
.ms-drawer .ms-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
.ms-drawer .ms-btn-primary {
    background: var(--primary);
    color: #fff;
}
.ms-drawer .ms-btn-primary:hover { filter: brightness(1.08); color: #fff; }
.ms-drawer .ms-btn-outline {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--primary);
}
.ms-drawer .ms-btn-outline:hover { background: #f0f5ff; color: var(--primary); }

/* Menu list — gọn gàng, hover tinh tế */
.ms-drawer .nav-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 6px 0 14px !important;
    width: 100% !important;
}
.ms-drawer .nav-list > li { margin: 0 !important; padding: 0 !important; }

.ms-drawer .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 14px;
    padding: 13px 18px !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    transition: all 0.15s !important;
    text-align: left !important;
    width: 100% !important;
    position: relative;
    line-height: 1.2;
}
.ms-drawer .nav-link::before { content: none !important; }  /* kill any pseudo */
.ms-drawer .nav-link:hover,
.ms-drawer .nav-link:active {
    background: #f3f4f6 !important;
    color: var(--primary) !important;
}
.ms-drawer .nav-link > i:first-child,
.ms-drawer .nav-link > img:first-child {
    width: 38px;
    height: 38px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 9px;
    text-align: center;
    font-size: 16px;
    color: #6b7280;
    margin: 0 !important;
    flex-shrink: 0;
    transition: all 0.18s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ms-drawer .nav-link:hover > i:first-child,
.ms-drawer .nav-link:hover > img:first-child {
    background: #ede9fe;
    transform: scale(1.06);
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.ms-drawer .nav-link:hover > i:first-child { color: var(--primary); }

/* Bottom mobile-bar — image icon với pastel badge */
.mobile-menu a img,
.mobile-menu button img {
    width: 36px;
    height: 36px;
    padding: 4px;
    background: #f3f4f6;
    border-radius: 9px;
    margin-bottom: 4px;
    object-fit: contain;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: all 0.18s;
}
.mobile-menu a:hover img,
.mobile-menu button:hover img,
.mobile-menu a.active img,
.mobile-menu button.active img {
    background: #ede9fe;
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}

/* KILL duplicate chevron từ main.css `.dropdown-link::before` */
.ms-drawer .dropdown-link::before { display: none !important; content: none !important; }

/* Dropdown link chevron bên phải — chỉ dùng ::after */
.ms-drawer .dropdown-link {
    padding-right: 36px !important;
}
.ms-drawer .dropdown-link::after {
    content: "\f078";  /* fa-chevron-down */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #9ca3af;
    transition: transform 0.2s;
    margin: 0;
}
.ms-drawer .dropdown-link.expanded::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--primary);
}

/* Dropdown sub-list — giấu mặc định, hiện khi .open */
.ms-drawer .dropdown-list {
    display: none !important;
    list-style: none !important;
    padding: 4px 0 8px 0 !important;
    margin: 0 !important;
    background: #f9fafb !important;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    transition: all 0.2s !important;
}
.ms-drawer .dropdown-list.open { display: block !important; }
.ms-drawer .dropdown-list li { margin: 0 !important; }
.ms-drawer .dropdown-list li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding: 9px 16px 9px 48px !important;
    font-size: 13px !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    transition: all 0.15s !important;
    white-space: normal !important;
}
.ms-drawer .dropdown-list li a:hover {
    background: #fff !important;
    color: var(--primary) !important;
}
.ms-drawer .dropdown-list li a img {
    width: 18px !important;
    height: 18px !important;
    object-fit: contain;
    margin: 0 !important;
    flex-shrink: 0;
}
.ms-drawer .dropdown-list li a > i {
    width: 18px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
}

/* Grouped category list — header section trong dropdown sản phẩm */
.ms-drawer .ms-cat-grouped { padding: 6px 0 8px !important; }
.ms-drawer .ms-cat-group-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 6px !important;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent !important;
    pointer-events: none;
}
.ms-drawer .ms-cat-group-label img {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain;
}
.ms-drawer .ms-cat-group-label + li a {
    padding-top: 8px !important;
}
/* Khoảng cách trên label (trừ label đầu tiên) */
.ms-drawer .ms-cat-grouped li:not(.ms-cat-group-label) + .ms-cat-group-label {
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
    padding-top: 12px !important;
}

/* Highlight Đăng xuất */
.ms-drawer .nav-link[href*="logout"] {
    color: #dc2626 !important;
    border-top: 1px solid #f3f4f6;
    margin-top: 4px !important;
}
.ms-drawer .nav-link[href*="logout"] > i:first-child { color: #dc2626 !important; }
.ms-drawer .nav-link[href*="logout"]:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
}

/* Highlight Admin Panel */
.ms-drawer .nav-link[href*="admin"] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Backdrop */
.backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 4;
    display: none;
    cursor: pointer;
}

/* Mobile bottom-bar — chỉ hiện ở mobile thật (≤767) — main.css cũ show ở ≤991 */
@media (min-width: 768px) {
    .mobile-menu { display: none !important; }
}
/* Padding-bottom ở mobile để bottom-bar không che footer */
@media (max-width: 767px) {
    body { padding-bottom: 76px; }
}

/* ==========================================================
   Notification Modal (popup_noti) — clean theme
   ========================================================== */
.dn-modal .modal-dialog { max-width: 540px; }
.dn-modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25) !important;
}
.dn-modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    background: linear-gradient(135deg, var(--primary), #818cf8);
    color: #fff;
    position: relative;
}
.dn-modal-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.4);
    animation: dn-bell-shake 2.5s ease-in-out infinite;
}
@keyframes dn-bell-shake {
    0%, 50%, 100% { transform: rotate(0); }
    10% { transform: rotate(-12deg); }
    20% { transform: rotate(10deg); }
    30% { transform: rotate(-8deg); }
    40% { transform: rotate(6deg); }
}
.dn-modal-title {
    flex: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.2px;
}
.dn-modal-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    padding: 0;
    transition: all 0.18s;
}
.dn-modal-close:hover {
    background: rgba(255,255,255,0.32);
    transform: rotate(90deg);
}

.dn-modal-body {
    padding: 22px 24px 26px;
    max-height: 70vh;
    overflow-y: auto;
    color: #374151;
    font-size: 14px;
    line-height: 1.6;
    background: #fff;
}
.dn-modal-body h1,
.dn-modal-body h2,
.dn-modal-body h3 {
    margin: 18px 0 10px;
    color: #1f2937;
    font-weight: 700;
    line-height: 1.3;
}
.dn-modal-body h2 { font-size: 18px; }
.dn-modal-body h3 { font-size: 15px; color: var(--primary); }
.dn-modal-body p { margin: 0 0 12px; }
.dn-modal-body ul, .dn-modal-body ol { margin: 0 0 14px; padding-left: 22px; }
.dn-modal-body ul li { margin-bottom: 6px; list-style-type: none; position: relative; padding-left: 4px; }
.dn-modal-body ul li::before {
    content: "✓";
    position: absolute;
    left: -18px;
    top: 0;
    color: var(--primary);
    font-weight: 700;
}
.dn-modal-body strong { color: #111827; font-weight: 700; }
.dn-modal-body a {
    color: var(--primary) !important;
    font-weight: 600;
    text-decoration: none !important;
    border-bottom: 1px dashed var(--primary);
    transition: all 0.15s;
}
.dn-modal-body a:hover {
    border-bottom-style: solid;
    filter: brightness(0.92);
}
/* Reset CKEditor inline styles xấu — uniform font */
.dn-modal-body * {
    font-family: inherit !important;
    color: inherit !important;
}
.dn-modal-body strong, .dn-modal-body b { color: #111827 !important; }
.dn-modal-body a, .dn-modal-body a * { color: var(--primary) !important; }
.dn-modal-body span, .dn-modal-body span * { font-size: inherit !important; }

/* Mobile responsive */
@media (max-width: 767px) {
    .dn-modal .modal-dialog {
        margin: 12px auto;
        max-width: calc(100vw - 24px) !important;
    }
}
@media (max-width: 575px) {
    .dn-modal-header { padding: 14px 16px; gap: 10px; }
    .dn-modal-icon { width: 34px; height: 34px; font-size: 14px; }
    .dn-modal-title { font-size: 15px; }
    .dn-modal-body { padding: 18px 18px 22px; font-size: 13.5px; }
    .dn-modal-body h2 { font-size: 16px; }
    .dn-modal-body h3 { font-size: 14px; }
}

/* ==========================================================
   Category-sidebar (mở từ bottom-bar nút Sản phẩm) — group label
   ========================================================== */
/* Override main.css `.category-link { font-size: 16px }` cho đồng bộ */
.category-sidebar .category-link {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    color: #1f2937 !important;
    transition: all 0.15s !important;
}
.category-sidebar .category-link:hover {
    background: #f3f4f6;
    color: var(--primary) !important;
}
.category-sidebar .category-link img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
    margin-right: 12px !important;
}
.category-sidebar .category-link i {
    font-size: 16px !important;
    margin-right: 12px !important;
    width: 24px !important;
    text-align: center;
}

.category-sidebar .cs-grouped { padding: 8px 0 16px !important; }
.category-sidebar .cs-group-label {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 6px !important;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    background: transparent !important;
    pointer-events: none;
    list-style: none;
}
.category-sidebar .cs-group-label img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}
.category-sidebar .cs-grouped .category-item + .cs-group-label,
.category-sidebar .cs-grouped .cs-group-empty + .cs-group-label {
    border-top: 1px solid #e5e7eb;
    margin-top: 6px;
    padding-top: 16px !important;
}

/* Empty state khi group chưa có danh mục */
.category-sidebar .cs-group-empty {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 12px !important;
    font-size: 12.5px;
    color: #9ca3af;
    font-style: italic;
    list-style: none;
}
.category-sidebar .cs-group-empty i {
    font-size: 13px;
    color: #d1d5db;
}