/* ═══════════════════════════════════════════════════════════════════════════
   Phase 5.K — Global design tokens cho MỌI front page user-facing.
   Apply lên body bằng class .bk-page (auto add qua JS layoutFront).
   ═══════════════════════════════════════════════════════════════════════ */
body.bk-page {
    background: #F5F6F7 !important;
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
    color: #27272A !important;
    font-size: var(--pp-fs-body);
    line-height: var(--pp-lh-body);
}
body.bk-page main,
body.bk-page .content-wrapper,
body.bk-page .container { font-family: inherit; }

/* Apply token Be Vietnam Pro cho mọi heading */
body.bk-page h1, body.bk-page h2, body.bk-page h3, body.bk-page h4, body.bk-page h5, body.bk-page h6 {
    font-family: 'Be Vietnam Pro', system-ui, sans-serif;
    color: #1F2937;
}
body.bk-page h1 { font-size: var(--pp-fs-h1); font-weight: var(--pp-fw-heading); line-height: var(--pp-lh-tight); }
body.bk-page h2 { font-size: var(--pp-fs-h2); font-weight: var(--pp-fw-heading); line-height: var(--pp-lh-tight); }
body.bk-page h3 { font-size: var(--pp-fs-h3); font-weight: var(--pp-fw-heading); line-height: var(--pp-lh-tight); }
body.bk-page h4 { font-size: var(--pp-fs-h4); font-weight: var(--pp-fw-medium); line-height: var(--pp-lh-tight); }

/* Phase 7 fix — Unify width 1240px cả header + content.
   Lý do: Unlimitmail KHÔNG có cart/wishlist/ads dày như Tiki → header 1440 vô nghĩa,
   gây asymmetric "menu rộng hơn nội dung" (user feedback 2026-05-17).
   Negative rule mới N16: Header width KHÔNG rộng hơn content. */
body.bk-page header .container,
body.bk-page header .uh-top-inner,
body.bk-page header .uh-main-inner,
body.bk-page header .uh-nav-inner,
body.bk-page main .container,
body.bk-page .bk-wrap .container,
body.bk-page footer .container,
body.bk-page .container { max-width: 1440px !important; padding-left: 16px; padding-right: 16px; }

/* Card defaults — apply cho mọi .card existing nếu chưa có style tốt hơn */
body.bk-page .card:not(.bk-card) {
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #F3F4F6;
}

/* Primary button class */
body.bk-page .bk-btn-primary {
    background: #13A459;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 10px 20px;
    font-weight: 600;
    transition: 0.2s;
}
body.bk-page .bk-btn-primary:hover { background: #0E8A47; color: #fff; }

/* Design tokens — extract từ boxtaikhoan.com + cải thiện */
:root {
    /* Color */
    --pp-primary-50:  #ECFDF5;
    --pp-primary-100: #D1FAE5;
    --pp-primary-500: #13A459;  /* primary green (CTA, badge stock OK) */
    --pp-primary-600: #0E8A47;
    --pp-primary-700: #0A6D38;

    --pp-danger-50:   #FEF2F2;
    --pp-danger-500:  #EF4444;  /* price detail */
    --pp-danger-700:  #B91C1C;

    --pp-warning-50:  #FFFBEB;
    --pp-warning-500: #F59E0B;  /* stock low */

    --pp-neutral-0:   #FFFFFF;
    --pp-neutral-50:  #F9FAFB;
    --pp-neutral-100: #F3F4F6;
    --pp-neutral-200: #E5E7EB;
    --pp-neutral-300: #D1D5DB;
    --pp-neutral-500: #6B7280;
    --pp-neutral-700: #374151;
    --pp-neutral-900: #1F2937;

    --pp-accent-50:   #F0F5FF;
    --pp-accent-100:  #DBEAFE;
    --pp-accent-500:  #3B82F6;

    /* Spacing */
    --pp-space-1: 4px;
    --pp-space-2: 8px;
    --pp-space-3: 12px;
    --pp-space-4: 16px;
    --pp-space-5: 20px;
    --pp-space-6: 24px;
    --pp-space-8: 32px;
    --pp-space-12: 48px;

    /* Radius */
    --pp-r-sm: 6px;
    --pp-r-md: 8px;
    --pp-r-lg: 12px;
    --pp-r-full: 999px;

    /* Shadow */
    --pp-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --pp-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --pp-shadow-lg: 0 12px 28px rgba(19,164,89,0.18);

    /* Font */
    --pp-font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Phase 7.N — Modern scale (body 16px standard, heading semibold 600 cho thanh thoát). */
    --pp-fs-body:       16px;
    --pp-fs-sm:         14px;   /* secondary, meta, chip */
    --pp-fs-meta:       15px;   /* total, sublabel */
    --pp-fs-h1:         28px;
    --pp-fs-h2:         22px;
    --pp-fs-h3:         18px;
    --pp-fs-h4:         16px;
    --pp-fs-card-name:  16px;
    --pp-fs-card-price: 18px;

    /* Font weight tokens — heading semibold 600 thay vì 700 cho dáng modern */
    --pp-fw-regular:  400;
    --pp-fw-medium:   500;
    --pp-fw-semibold: 600;
    --pp-fw-bold:     700;
    --pp-fw-heading:  600;

    --pp-lh-body:  1.55;
    --pp-lh-tight: 1.35;

    /* Icon size tokens — balanced (icon-md +1px, không bump to quá khi viewport thường 100%) */
    --pp-ico-xs: 14px;   /* inline metadata: stock count, flag */
    --pp-ico-sm: 16px;   /* chip, count badge */
    --pp-ico-md: 18px;   /* sidebar root, action button, h3 */
    --pp-ico-lg: 22px;   /* card brand icon, h2 */
    --pp-ico-xl: 32px;   /* h1 category, hero */
}

.pp-scope {
    font-family: var(--pp-font);
    color: var(--pp-neutral-900);
}
.pp-scope, .pp-scope * { box-sizing: border-box; }
.pp-scope img { max-width: 100%; height: auto; display: block; }

/* Breadcrumb */
.pp-breadcrumb {
    font-size: 14px;
    color: var(--pp-neutral-700);
    margin: var(--pp-space-4) 0 var(--pp-space-2);
}
.pp-breadcrumb a {
    color: var(--pp-primary-700);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s;
}
.pp-breadcrumb a:hover { color: var(--pp-primary-500); }
.pp-breadcrumb .pp-sep { color: var(--pp-neutral-500); margin: 0 6px; }

/* Hero */
.pp-hero {
    background: var(--pp-neutral-0);
    border: 1px solid var(--pp-neutral-200);
    border-radius: var(--pp-r-lg);
    padding: var(--pp-space-6);
    margin-bottom: var(--pp-space-6);
}
.pp-hero h1 {
    color: var(--pp-neutral-900);
    font-weight: 700;
    font-size: 26px;
    margin: 0 0 var(--pp-space-2);
    line-height: 1.3;
}
.pp-hero p { color: var(--pp-neutral-700); margin: 0; line-height: 1.6; }
.pp-hero .pp-hero-icon {
    font-size: 32px;
    color: var(--pp-primary-500);
    margin-right: var(--pp-space-3);
    display: inline-flex; align-items: center;
}
@media (max-width: 576px) {
    .pp-hero { padding: var(--pp-space-4); }
    .pp-hero h1 { font-size: 20px; }
}

/* Sub-category pills */
.pp-pills {
    display: flex; flex-wrap: wrap; gap: var(--pp-space-2);
    margin-bottom: var(--pp-space-5);
}
.pp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: var(--pp-neutral-0);
    border: 1px solid var(--pp-neutral-200);
    border-radius: var(--pp-r-full);
    color: var(--pp-neutral-700);
    font-size: 13px;
    text-decoration: none;
    transition: all .15s;
}
.pp-pill:hover {
    background: var(--pp-primary-500);
    color: var(--pp-neutral-0);
    border-color: var(--pp-primary-500);
}

/* Product card */
.pp-grid {
    display: grid;
    gap: var(--pp-space-4);
    grid-template-columns: 1fr;
}
@media (min-width: 576px) { .pp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .pp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px){ .pp-grid { grid-template-columns: repeat(4, 1fr); } }

.pp-card-link { display: block; height: 100%; text-decoration: none; color: inherit; }
.pp-card-link:hover { text-decoration: none; color: inherit; }
.pp-card {
    background: var(--pp-neutral-0);
    border: 1px solid var(--pp-neutral-100);
    border-radius: var(--pp-r-lg);
    box-shadow: var(--pp-shadow-sm);
    overflow: hidden;
    height: 100%;
    display: flex; flex-direction: column;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.pp-card-link:hover .pp-card {
    transform: translateY(-3px);
    box-shadow: var(--pp-shadow-md);
    border-color: var(--pp-primary-100);
}
.pp-card-img {
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
    background: var(--pp-neutral-50);
}
.pp-card-img-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--pp-neutral-300);
}
.pp-card-body { padding: var(--pp-space-3) var(--pp-space-4) var(--pp-space-4); flex: 1; display: flex; flex-direction: column; }
.pp-card-name {
    font-size: 14px; font-weight: 600;
    color: var(--pp-neutral-900);
    margin: 0 0 var(--pp-space-2);
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.8em;
}
.pp-card-meta {
    display: flex; flex-wrap: wrap; gap: var(--pp-space-2);
    margin-bottom: var(--pp-space-3); font-size: 12px;
}
.pp-card-price {
    font-size: 18px; font-weight: 700;
    color: var(--pp-danger-500);
    margin-top: auto;
}

/* Badges */
.pp-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--pp-r-sm);
    font-size: 12px; font-weight: 500;
}
/* All badge colors WCAG AA 4.5:1 minimum */
.pp-badge-country { background: var(--pp-accent-50); color: #1E40AF; }     /* blue-800 on blue-50 = 9.8:1 */
.pp-badge-type    { background: var(--pp-neutral-100); color: var(--pp-neutral-900); }   /* gray-900 on gray-100 = 14.4:1 */
.pp-stock-ok    { background: var(--pp-primary-50); color: var(--pp-primary-700); }  /* darken */
.pp-stock-low   { background: var(--pp-warning-50); color: #92400E; }       /* amber-800 on amber-50 */
.pp-stock-empty { background: var(--pp-danger-50);  color: var(--pp-danger-700); }

/* Empty state */
.pp-empty {
    text-align: center; padding: var(--pp-space-12) var(--pp-space-4);
    color: var(--pp-neutral-700);
}
.pp-empty .bx { font-size: 48px; color: var(--pp-neutral-300); margin-bottom: var(--pp-space-3); }

/* === Product detail page === */
.pp-detail {
    background: var(--pp-neutral-0);
    border: 1px solid var(--pp-neutral-100);
    border-radius: var(--pp-r-lg);
    padding: var(--pp-space-6);
    box-shadow: var(--pp-shadow-sm);
    margin-bottom: var(--pp-space-6);
}
.pp-detail-image {
    display: block;
    object-fit: contain;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--pp-r-lg, 12px);
    padding: 16px;
}
.pp-detail-image-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--pp-neutral-300); font-size: 48px;
}
.pp-detail-image--broken {
    position: relative;
    min-height: 220px;
}
.pp-detail-image--broken::after {
    content: '⊘ Ảnh không tồn tại';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #9CA3AF; font: 500 13px 'Be Vietnam Pro', sans-serif;
}
.pp-detail-title {
    font-size: 26px; font-weight: var(--pp-fw-heading);
    color: var(--pp-neutral-900);
    margin: 0 0 var(--pp-space-3); line-height: 1.3;
}
.pp-detail-badges { display: flex; flex-wrap: wrap; gap: var(--pp-space-2); margin-bottom: var(--pp-space-4); }
.pp-detail-price {
    font-size: 32px; font-weight: var(--pp-fw-bold);
    color: var(--pp-danger-500);
    margin: var(--pp-space-3) 0 var(--pp-space-5);
    line-height: 1;
}
.pp-detail-price small { font-size: 14px; color: var(--pp-neutral-700); font-weight: 400; margin-left: 8px; }

.pp-qty-row { display: flex; gap: var(--pp-space-2); align-items: stretch; flex-wrap: wrap; margin-bottom: var(--pp-space-3); }
.pp-qty {
    display: inline-flex; align-items: stretch;
    border: 1.5px solid var(--pp-neutral-200);
    border-radius: var(--pp-r-md);
    overflow: hidden;
}
.pp-qty button {
    background: var(--pp-neutral-50);
    border: none;
    width: 40px; font-size: 18px; font-weight: 600;
    color: var(--pp-neutral-700); cursor: pointer;
    transition: background .12s;
}
.pp-qty button:hover { background: var(--pp-neutral-100); }
.pp-qty input {
    width: 70px; border: none; text-align: center;
    font-size: 15px; font-weight: 600; outline: none;
}

/* Phase 10.AP — Buy button: refined CTA — vừa phải, cân với qty input, đúng vị trí */
.pp-qty-row { align-items: center; }      /* căn giữa theo trục dọc — buy và qty đồng height */
.pp-btn-buy {
    background: var(--pp-primary-500);
    color: var(--pp-neutral-0);
    border: none;
    border-radius: 10px;
    height: 44px;                          /* khớp qty input/button stretch (~44px) */
    padding: 0 24px;
    font-size: 14px; font-weight: 600;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
    flex: 0 0 auto;
    min-width: 170px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: 0 2px 4px rgba(19,164,89,0.20);
}
.pp-btn-buy i { font-size: 17px; }
.pp-btn-buy:hover:not(:disabled) {
    background: var(--pp-primary-600);
    box-shadow: 0 4px 12px rgba(19,164,89,0.28);
    color: var(--pp-neutral-0);
}
.pp-btn-buy:active:not(:disabled) { transform: scale(0.98); }
@media (max-width: 540px) {
    .pp-btn-buy { flex: 1; min-width: 0; }
}

/* Phase 10.AP — Country flag chip refined: nhỏ gọn, position khéo léo phía trên title */
.pp-country-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 10px 4px 5px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 999px;
    font: 600 12px 'Be Vietnam Pro', sans-serif;
    color: #374151;
    margin-bottom: 10px;
    transition: border-color .12s, box-shadow .12s;
}
.pp-country-chip:hover { border-color: #D1D5DB; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }

/* Phase 10.AQ — Chip inline cạnh title H1 (căn lên cao xíu so với baseline) */
.pp-detail-title { display: inline; }       /* fallback nếu chưa override */
.pp-detail-title .pp-title-text { vertical-align: middle; }
.pp-country-chip-inline {
    display: inline-flex; vertical-align: middle;
    margin: 0 0 0 10px;
    padding: 3px 9px 3px 4px;
    font-size: 11.5px;
    font-weight: 600;
    position: relative;
    top: -4px;                              /* CHECK LÊN CAO XÍU — lifted above baseline */
}
.pp-country-chip-inline .pp-cc-flag { width: 18px; height: 13px; }
.pp-country-chip-inline .pp-cc-name { font-size: 11.5px; }
.pp-country-chip .pp-cc-flag {
    width: 20px; height: 14px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
    display: block;
}
.pp-country-chip .pp-cc-emoji { font-size: 16px; line-height: 1; }
.pp-country-chip .pp-cc-name { letter-spacing: 0.1px; }
.pp-country-chip.is-global {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-color: #FCD34D;
    color: #92400E;
}
.pp-btn-buy:disabled { opacity: 0.55; cursor: not-allowed; }
.pp-btn-buy .bx-loader { animation: pp-spin 1s linear infinite; display: none; }
.pp-btn-buy.is-loading .bx-loader { display: inline-block; }
.pp-btn-buy.is-loading .bx-shopping-bag { display: none; }
@keyframes pp-spin { to { transform: rotate(360deg); } }

.pp-attrs-table { width: 100%; margin: var(--pp-space-5) 0 0; border-collapse: collapse; font-size: 14px; }
.pp-attrs-table th, .pp-attrs-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--pp-neutral-100);
    text-align: left;
}
.pp-attrs-table th {
    width: 30%; background: var(--pp-neutral-50);
    color: var(--pp-neutral-700); font-weight: 500;
}
.pp-attrs-table td { color: var(--pp-neutral-900); font-weight: 500; }

.pp-desc {
    background: var(--pp-neutral-50);
    border-left: 3px solid var(--pp-primary-500);
    padding: var(--pp-space-4) var(--pp-space-5);
    margin: var(--pp-space-6) 0;
    border-radius: 0 var(--pp-r-md) var(--pp-r-md) 0;
    line-height: 1.7;
    color: var(--pp-neutral-700);
}

/* Related products section */
.pp-related h2 {
    font-size: 18px; font-weight: 700;
    color: var(--pp-neutral-900);
    margin: var(--pp-space-8) 0 var(--pp-space-4);
}

/* Sticky bottom CTA mobile */
@media (max-width: 768px) {
    .pp-detail-title { font-size: 18px; }
    .pp-detail-price { font-size: 24px; }
    .pp-sticky-bottom {
        position: fixed; bottom: 0; left: 0; right: 0;
        background: var(--pp-neutral-0);
        padding: 12px 16px;
        border-top: 1px solid var(--pp-neutral-200);
        box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
        display: flex; gap: 10px; z-index: 99;
    }
    .pp-sticky-bottom .pp-sticky-price { font-size: 17px; font-weight: 800; color: var(--pp-danger-500); display: flex; align-items: center; }
    .pp-sticky-bottom .pp-btn-buy { flex: 1; padding: 10px 16px; min-width: 0; }
    body.pp-has-sticky { padding-bottom: 76px; }
}
@media (min-width: 769px) { .pp-sticky-bottom { display: none; } }