/* SHOP/P2 theme pack — gộp file, cùng thứ tự rule. Nguồn gốc giữ nguyên để rollback. */

/* ==== inter.css ==== */
/**
 * Inter — self-hosted variable only (giảm FOUT / số request font khi F5).
 * LICENSE: see ../vendor/fonts/inter/LICENSE.txt
 */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../vendor/fonts/inter/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: optional;
    src: url('../vendor/fonts/inter/InterVariable-Italic.woff2') format('woff2');
}


/* ==== ola-cauth-guard.css ==== */
/* Ẩn modal auth trước khi lazy-load CSS đầy đủ — tránh flash form đăng nhập */
html { overflow-y: scroll; }
.ola-cauth-modal { display: none; }

/* ==== ola-fa-tune.css ==== */
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url("../vendor/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
    font-family: "Font Awesome 6 Free";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../vendor/font-awesome/6.4.0/webfonts/fa-regular-400.woff2") format("woff2");
}
@font-face {
    font-family: "Font Awesome 6 Brands";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../vendor/font-awesome/6.4.0/webfonts/fa-brands-400.woff2") format("woff2");
}

/* ==== slick.css ==== */
/* slick carousel 1.5.9 — phần lõi (tách khỏi main.css của bộ giao diện cũ).
   Phần trang trí nút/dots nằm trong shop-p2-layout.css. */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .slick-list:focus {
        outline: none;
    }

    .slick-list.dragging {
        cursor: pointer;
    }

.slick-slider .slick-track,
.slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

    .slick-track:before,
    .slick-track:after {
        display: table;
        content: "";
    }

    .slick-track:after {
        clear: both;
    }

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    min-height: 1px;
}

[dir="rtl"] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-dots {
    display: block;
    width: 100%;
    padding: 0;
    margin: 12px 0 0;
    list-style: none;
    text-align: center;
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        margin: 0 4px;
    }

        .slick-dots li button {
            display: block;
            width: 10px;
            height: 10px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: #cfcfcf;
            font-size: 0;
            line-height: 0;
            cursor: pointer;
        }

        .slick-dots li.slick-active button {
            background: var(--p2-accent, #ff9900);
        }


/* ==== phantrang.css ==== */
#pagination {
    margin: 0 auto;
    overflow: hidden
}

.pagination input {
    margin-left: 10px;
    margin-right: 10px;
    padding: 4px
}

/* Chỉ áp dụng khối phân trang cũ (#pagination). Không ghi đè Bootstrap ul.pagination */
#pagination.pagination,
#pagination {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-top: -10px;
    padding: 20px 0 0;
    text-align: center;
    position: relative
}

    .pagination.right {
        text-align: right;
        width: 700px
    }

    .pagination.left {
        text-align: left;
        width: 700px
    }

    .pagination a {
        background: none repeat scroll 0 0 #f9f9f9;
        border: 1px solid #DDD;
        border-radius: 4px;
        color: #33383A;
        font-size: 12px;
        font-weight: 400;
        margin: 0 1px;
        padding: 7px 14px;
        text-decoration: none
    }

    .pagination b {
        background: #868c94 none repeat scroll 0 0;
        border: 0 solid #ddd;
        border-radius: 4px;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        margin: 0 1px;
        padding: 7px 14px;
        text-decoration: none
    }

    .pagination input {
        background: none repeat scroll 0 0 #FFF;
        border: 1px solid #DDD;
        border-radius: 4px;
        color: #000;
        font-size: small;
        font-weight: 400;
        margin: 0 1px;
        padding: 5px 4px
    }

        .pagination input.active {
            background: none repeat scroll 0 0 #39A3E6;
            border: 1px solid #DDD;
            border-radius: 4px;
            color: #000;
            font-size: medium;
            font-weight: 700;
            margin: 0 1px;
            padding: 4px 10px
        }

    .pagination a.active {
        background: none repeat scroll 0 0 #F5F5F5;
        border: 1px solid #DDD;
        color: #000;
        font-size: 12px;
        font-weight: 400;
        text-decoration: none;
        border-radius: 4px
    }

    .pagination span {
        margin-left: 10px
    }

    .pagination a:hover {
        background: none repeat scroll 0 0 #F5F5F5;
        border: 1px solid #DDD;
        color: #000;
        font-size: 12px;
        font-weight: 400;
        text-decoration: none;
        border-radius: 4px
    }

.breadpage {
    border-bottom: 1px solid #CCC;
    border-top: 8px solid #999;
    clear: both;
    height: 39px;
    letter-spacing: 0;
    line-height: 40px;
    margin-top: 20px;
    text-transform: uppercase
}


/* ==== ola-images.css ==== */
/**
 * SHOP P1 — ảnh lấp đầy khung card / hero (offline, local).
 */
#OLA .prod-img-wrap,
#OLA .hero-img-wrap,
#OLA .news-thumb,
#OLA .sidebar-prod-img {
    position: relative;
    overflow: hidden;
}

#OLA .prod-img-wrap {
    display: block;
    background: #f0f0f0;
}

    #OLA .prod-img-wrap img.prod-img,
    #OLA .prod-img-wrap > a > img.prod-img {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: cover !important;
        display: block !important;
    }

#OLA .hero-img-wrap img.hero-img,
#OLA .hero-img-wrap > img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#OLA .news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

#OLA .html-content img,
#OLA .article-content img {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

#OLA .block-collage .block-collage__item img,
#OLA .article-content .block-collage .block-collage__item img,
#OLA .html-content .block-collage .block-collage__item img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    object-fit: cover !important;
}

#OLA img.navbar-logo {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

/* ==== shop-p2-theme.css ==== */
/* SHOP/P2 — shopmuanhanh look + Bootstrap 5.3 + Inter */
:root {
    --p2-ink: #1a1a1a;
    --p2-muted: #6b6b6b;
    --p2-gold: #d4a017;
    --p2-gold-dark: #b8860b;
    --p2-topbar: #4a4a4a;
    --p2-bg: #f7f7f7;
    --p2-white: #ffffff;
    --p2-line: #e8e8e8;
    --p2-rose: #e4416f;
    --p2-rose-dark: #c92f5c;
    --p2-link: #0a61c6;
    --p2-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --p2-radius: 6px;
    --bs-body-font-family: var(--p2-font);
    --bs-body-color: #444;
    --bs-body-bg: var(--p2-bg);
    --bs-primary: #d4a017;
    --bs-primary-rgb: 212, 160, 23;
    --bs-link-color: #0a61c6;
}

body.shop-p2-body {
    font-family: var(--p2-font);
    color: #444;
    background: var(--p2-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    /* clip: không tạo scroll container → sticky PDP vẫn hoạt động (khác overflow-x:hidden) */
    overflow-x: clip;
}

.shop-p2-body main,
.shop-p2-body #mt-main { flex: 1 0 auto; }

.shop-p2-body a { text-decoration: none; transition: color .2s ease; }
.shop-p2-body h1, .shop-p2-body h2, .shop-p2-body h3, .shop-p2-body h4,
.shop-p2-body .heading, .shop-p2-body .chuhaimau {
    font-family: var(--p2-font);
    font-weight: 700;
    color: var(--p2-ink);
}

.visually-hidden {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Header, menu, banner, footer: xem shop-p2-layout.css */

/* ===== Section headings / tabs ===== */
.p2-section-title {
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    color: #726f6a;
    margin: 2rem 0 1.25rem;
}
.mt-tabs-nav { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; margin-bottom: 1rem; }
.mt-tabs-nav .nav-link {
    border: 0; background: transparent; padding: 0.5rem 1rem;
    color: #726f6a; font-weight: 600; text-transform: uppercase; cursor: pointer;
}
.mt-tabs-nav .nav-link.active { color: var(--p2-ink); border-bottom: 2px solid var(--p2-gold); }
.tab-pane-p2 { display: none; }
.tab-pane-p2.active, .tab-pane-p2.show { display: block; }

/* ===== Product card (mt-product1 adapted) ===== */
.mt-productrow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.mt-productrow > li {
    width: 25%;
    padding: 0 10px 24px;
    box-sizing: border-box;
}
@media (max-width: 991.98px) {
    .mt-productrow > li { width: 33.333%; }
}
@media (max-width: 767.98px) {
    .mt-productrow > li { width: 50%; }
}
.mt-product1 .box { position: relative; background: #fff; border: 1px solid var(--p2-line); border-radius: var(--p2-radius); overflow: hidden; }
.mt-product1 .b3 { position: relative; }
/* Website: ảnh sản phẩm 4:3 (video dùng 16:9 riêng) */
.mt-product1 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.mt-product1 .caption {
    position: absolute; top: 8px; left: 8px;
    background: var(--p2-gold); color: #fff;
    font-size: 0.75rem; font-weight: 700;
    padding: 2px 6px; border-radius: 3px; z-index: 2;
}
/* Thanh hành động trên ảnh (hover) — giống Đặt Mua cũ, hỗ trợ 1–2 nút */
.mt-product1 .links {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: stretch;
    background: rgba(255, 255, 255, .92);
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .25s ease, opacity .25s ease, visibility .25s;
}
.mt-product1 .links:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
    background-repeat: repeat-x;
    background-position: center bottom;
    background-size: 75px 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 75 8' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.92)' d='M0 8 V5 Q18.75 1 37.5 5 T75 5 V8 Z'/%3E%3C/svg%3E");
    pointer-events: none;
}
.mt-product1:hover .links,
.mt-product1:focus-within .links {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
/* Màn cảm ứng không có hover: lần chạm đầu chỉ "kích hoạt hover" khiến link/ảnh không mở → luôn hiện thanh nút, chạm là mở ngay */
@media (hover: none) {
    .mt-product1 .links {
        transform: none;
        opacity: 1;
        visibility: visible;
    }
}
.mt-product1 .links li {
    margin: 0;
    padding: 0;
    list-style: none;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}
.mt-product1 .links li + li {
    border-left: 1px solid rgba(0, 0, 0, .08);
}
.mt-product1 .links a,
.mt-product1 .links button {
    flex: 1 1 auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.4rem;
    color: var(--p2-ink);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
}
.mt-product1 .links a i,
.mt-product1 .links a .fa-solid,
.mt-product1 .links button i,
.mt-product1 .links button .fa-solid {
    display: inline-block;
    margin: 0 6px 0 0 !important;
    padding: 0;
    font-size: 0.92em;
    line-height: 1;
    vertical-align: middle;
}
.mt-product1 .links a span,
.mt-product1 .links button span {
    display: inline-block;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    white-space: nowrap;
}
.mt-product1 .links a:hover,
.mt-product1 .links button:hover { color: var(--p2-gold); }
.mt-product1 .links button.js-p2-buy-now { color: var(--p2-gold); }
.mt-product1 .links button.js-p2-buy-now:hover { color: var(--p2-ink); }
.mt-product1 .links button:disabled {
    opacity: 0.55;
    cursor: wait;
}
.mt-product1 .txt { padding: 0.65rem 0.15rem 0; text-align: left; }
.mt-product1 .title { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.35rem; }
.mt-product1 .title a { color: #555; }
.mt-product1 .title a:hover { color: var(--p2-gold); }
.mt-product1 .price {
    color: var(--p2-gold);
    font-weight: 700;
    font-size: 1.05rem;
    margin-right: 0.4rem;
    letter-spacing: 0;
    white-space: nowrap;
}
.mt-product1 del.off {
    color: #999;
    font-size: 0.85rem;
}
.truncate-h {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ===== PLP (Danh mục SP) ===== */
.p2-plp-title {
    font-family: var(--p2-font);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    color: var(--p2-link, #2a2a2a);
    margin: 0 0 0.35rem;
    line-height: 1.3;
}
.p2-plp-desc { font-size: 0.95rem; max-width: none; color: #555; }
.p2-plp-seo {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* Mô tả danh mục dài: thu gọn + mờ dần ở đáy, nút "Xem thêm" (JS trong DanhMucSanPham.aspx) */
.p2-plp-seo .p2-plp-desc.is-clamped {
    position: relative;
    overflow: hidden;
    transition: max-height .35s ease;
}
.p2-plp-seo .p2-plp-desc.is-clamped:not(.is-open)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
}
.p2-plp-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 10px auto 0;
    padding: 8px 20px;
    border: 1px solid rgba(228, 65, 111, .35);
    border-radius: 999px;
    background: #fff5f8;
    color: var(--p2-rose, #e4416f);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.p2-plp-more i { font-size: 12px; transition: transform .25s ease; }
.p2-plp-more[aria-expanded="true"] i { transform: rotate(180deg); }
.p2-plp-more:hover,
.p2-plp-more:focus-visible {
    background: var(--p2-rose, #e4416f);
    border-color: var(--p2-rose, #e4416f);
    color: #fff;
    outline: none;
    box-shadow: 0 6px 16px rgba(228, 65, 111, .25);
}
.p2-plp-body > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.p2-plp-sticky {
    width: 100%;
    margin-bottom: 0.5rem;
}
@media (min-width: 992px) {
    .p2-plp-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: var(--p2-stick-top, 88px);
        transition: top .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 10;
        align-self: flex-start;
        max-height: none;
        overflow: visible;
        padding-bottom: 0.5rem;
        min-width: 0;
        max-width: 100%;
    }
}

.p2-filter-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 0;
    box-shadow: 0 4px 16px rgba(40, 10, 25, 0.04);
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (min-width: 992px) {
    .p2-filter-card {
        max-height: calc(100vh - 100px);
    }
}
.p2-filter-card__head {
    flex: 0 0 auto;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.05rem 0.75rem;
    margin: 0;
    border-bottom: 1px solid #eee;
    background: #fff;
}
.p2-filter-card__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.85rem 1.05rem 1.1rem;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Ẩn thanh trượt, vẫn lăn chuột / trackpad được */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge cũ */
}
.p2-filter-card__body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none; /* Chrome / Safari / Edge */
}
.p2-filter-section--price {
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #f0f0f0;
}
.p2-filter-section--cats {
    margin-bottom: 0;
}
.p2-plp-empty {
    text-align: center;
    padding: 2.75rem 1.25rem;
    background: #faf7f8;
    border: 1px dashed #e8c9d4;
    border-radius: 12px;
}
.p2-plp-empty__title {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #4c3b42;
}
.p2-plp-empty__hint {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: #888;
}
.p2-plp-empty__reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    background: var(--p2-rose, #e93066);
    color: #fff !important;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none !important;
}
.p2-plp-empty__reset:hover {
    filter: brightness(0.96);
    color: #fff !important;
}
.p2-filter-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #222;
}
.p2-filter-reset {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--p2-rose, #e4416f) !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.p2-filter-reset:hover { text-decoration: underline !important; }
.p2-filter-section {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-bottom: 1.1rem;
}
.p2-filter-section:last-child { margin-bottom: 0; }
.p2-filter-section__title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.55rem;
}
.p2-sidebar-parent {
    display: block !important;
    font-size: 0.8rem;
    font-weight: 600;
    color: #888;
    margin: -0.25rem 0 0.55rem;
    line-height: 1.35;
    text-transform: none !important;
}
.p2-price-presets {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}
.p2-price-preset {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    transition: border-color .15s, background .15s;
}
.p2-price-preset:hover {
    border-color: #f2a0b8;
    background: #fffafb;
}
.p2-price-preset.is-active {
    border-color: #f2a0b8;
    background: #fff0f4;
    color: #222 !important;
    font-weight: 600;
}
.p2-price-radio {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    background: #fff;
    position: relative;
}
.p2-price-preset.is-active .p2-price-radio {
    border-color: var(--p2-rose, #e4416f);
    background: var(--p2-rose, #e4416f);
    box-shadow: inset 0 0 0 3px #fff;
}
.p2-filter-hint {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 0.5rem;
}
.p2-filter-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.p2-filter-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
    margin-bottom: 0.65rem;
    box-sizing: border-box;
}
.p2-filter-input {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    padding: 0 0.45rem;
    margin: 0;
    min-height: 40px;
    overflow: hidden;
}
.p2-filter-input input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-size: 0.82rem;
    padding: 0.45rem 0;
    color: #222;
    box-sizing: border-box;
}
.p2-filter-suffix {
    flex: 0 0 auto;
    color: #999;
    font-size: 0.8rem;
    font-weight: 600;
    padding-left: 0.2rem;
}
.p2-filter-apply {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: var(--p2-rose, #e4416f);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}
.p2-filter-apply:hover { filter: brightness(0.96); }

.p2-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: none;
    overflow: visible;
}
.p2-cat-list li { margin: 0; }
.p2-cat-list a,
.p2-cat-list a:link,
.p2-cat-list a:visited,
.p2-cat-list a:hover,
.p2-cat-list .p2-cat-name,
.p2-cat-list .p2-cat-count {
    text-transform: none !important;
}
.p2-cat-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    color: #555 !important;
    text-decoration: none !important;
    font-size: 0.9rem;
}
.p2-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p2-cat-list a:hover {
    background: #fafafa;
    color: var(--p2-rose, #e4416f) !important;
}
.p2-cat-list li.is-active a {
    background: #fff0f4;
    color: var(--p2-rose, #e4416f) !important;
    font-weight: 600;
}
.p2-cat-count {
    font-size: 0.78rem;
    color: #999;
    font-weight: 600;
    flex: 0 0 auto;
}

.p2-filter-section--cats {
    margin-top: 0.2rem;
}
.p2-cat-tree,
.p2-cat-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
}
    .p2-cat-tree a,
    .p2-cat-tree a:link,
    .p2-cat-tree a:visited {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        padding: 0.48rem 0.55rem;
        border-radius: 8px;
        color: #3a3a3a !important;
        text-decoration: none !important;
        font-size: 0.92rem;
        font-weight: 400;
        line-height: 1.4;
        margin-bottom: 0.3rem;
        text-transform: none !important;
    }
.p2-cat-tree a::before {
    content: "";
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: transparent;
}
.p2-cat-tree__node--parent > a,
.p2-cat-tree__node--parent > a .p2-cat-name {
    font-weight: 700;
    font-size: calc(0.92rem + 2px);
    text-transform: uppercase !important;
    color: #2b2b2b !important;
    letter-spacing: 0.02em;
}
.p2-cat-tree__node--parent > a {
    background: #f6f6f6;
}
.p2-cat-tree__node--parent > a::before {
    display: none;
}
.p2-cat-tree__kids > li > a {
    padding-left: 0.85rem;
}
.p2-cat-tree__node--child > a::before {
    background: #b4234e;
}
.p2-cat-tree__grand > li > a {
    padding-left: 1.45rem;
    font-size: 0.88rem;
    color: #444 !important;
}
.p2-cat-tree__node--grand > a::before {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
    background: #e4416f;
}
.p2-cat-tree a:hover {
    background: #fff5f8;
    color: var(--p2-rose, #e4416f) !important;
}
.p2-cat-tree li.is-active > a {
    background: #ffe8ef;
    color: var(--p2-rose, #e4416f) !important;
    font-weight: 700;
}
.p2-cat-tree .p2-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: none !important;
}
.p2-cat-tree .p2-cat-count {
    color: #777;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: none !important;
}

.p2-plp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}
.p2-plp-list-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    margin: 0 0 0.15rem;
}
.p2-plp-count { margin: 0; }
.p2-sort-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.p2-sort-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    background: #fff;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.p2-sort-pill i { font-size: 0.8rem; opacity: 0.7; }
.p2-sort-pill:hover {
    border-color: #f2a0b8;
    background: #fffafb;
}
.p2-sort-pill.is-active {
    border-color: var(--p2-rose, #e4416f);
    background: #fff0f4;
    color: var(--p2-rose, #e4416f) !important;
}
.p2-sort-pill.is-active i { opacity: 1; }

/* PLP: 3 sản phẩm / hàng (desktop) */
.p2-plp-grid.mt-productrow > li {
    width: 33.333%;
}
/* Empty / thông báo: full hàng — tránh bị ép 33% nhìn như trang trắng */
.p2-plp-grid.mt-productrow > li.w-100,
.p2-plp-grid.mt-productrow > li.p2-plp-empty-item {
    width: 100% !important;
    max-width: 100%;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 991.98px) {
    .p2-plp-grid.mt-productrow > li { width: 50%; }
    .p2-plp-grid.mt-productrow > li.w-100,
    .p2-plp-grid.mt-productrow > li.p2-plp-empty-item { width: 100% !important; }
}
@media (max-width: 575.98px) {
    .p2-plp-grid.mt-productrow > li { width: 50%; }
    .p2-plp-grid.mt-productrow > li.w-100,
    .p2-plp-grid.mt-productrow > li.p2-plp-empty-item { width: 100% !important; }
    .p2-plp-toolbar { align-items: stretch; }
    .p2-sort-pills { width: 100%; }
    .p2-sort-pill { flex: 1 1 auto; justify-content: center; }
}

.p2-plp-pager {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}
.p2-plp-pager .pagination,
ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    gap: 0.25rem;
}
.p2-plp-pager .page-item,
ul.pagination > .page-item {
    display: inline-flex;
    width: auto;
    flex: 0 0 auto;
}
.p2-plp-pager .page-link,
ul.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 38px;
    height: 38px;
    padding: 0 0.85rem;
    margin: 0;
    color: #4a4a4a;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    background: #fff;
    border: 1px solid #eadfe3;
    border-radius: 999px !important;
    box-shadow: 0 1px 2px rgba(40, 20, 30, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.p2-plp-pager .page-item.active .page-link,
ul.pagination .page-item.active .page-link {
    background: var(--p2-rose, #e4416f);
    border-color: var(--p2-rose, #e4416f);
    color: #fff;
    box-shadow: 0 2px 6px rgba(228, 65, 111, 0.28);
}
.p2-plp-pager .page-link:hover,
ul.pagination .page-link:hover {
    color: var(--p2-rose, #e4416f);
    background: #fff5f8;
    border-color: #f2a0b8;
    z-index: 2;
}
.p2-plp-pager .page-item.active .page-link:hover,
ul.pagination .page-item.active .page-link:hover {
    color: #fff;
    background: var(--p2-rose, #e4416f);
    border-color: var(--p2-rose, #e4416f);
}
.p2-plp-pager .page-item.disabled .page-link,
ul.pagination .page-item.disabled .page-link {
    color: #bbb;
    background: #f7f7f7;
    border-color: #eee;
    box-shadow: none;
}

.shop-p2-body .page-title { font-weight: 800; text-transform: uppercase; color: #726f6a; }
.shop-p2-body .shop-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;
}
.shop-p2-body .sidebar-title { font-weight: 700; text-transform: uppercase; margin-bottom: 0.75rem; }
.shop-p2-body .cat-list { list-style: none; padding: 0; margin: 0; }
.shop-p2-body .cat-list a { color: #555; display: block; padding: 0.35rem 0; }
.shop-p2-body .cat-list a:hover { color: var(--p2-gold); }

/* ===== PDP: gallery trên + sticky mua (7|5) ===== */
.p2-pdp { padding: 1.5rem 0 3rem; }
.p2-pdp-breadcrumb {
    background: #f5f5f5;
    border-bottom: 1px solid #ebebeb;
    padding: 0.65rem 0;
    margin-bottom: 1.25rem;
}
.p2-pdp-breadcrumb .breadcrumb,
.p2-pdp-breadcrumb .p2-bc {
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: 0.875rem;
    line-height: 1.45;
    flex-wrap: wrap;
}
.p2-pdp-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    float: none;
    padding-right: 0.5rem;
    color: #999;
    font-weight: 400;
}
.p2-pdp-breadcrumb .breadcrumb-item {
    color: #666;
}
.p2-pdp-breadcrumb .breadcrumb-item a {
    color: #666;
    text-decoration: none !important;
    font-weight: 400;
}
.p2-pdp-breadcrumb .breadcrumb-item a:hover {
    color: var(--p2-rose, #e4416f);
}
.p2-pdp-breadcrumb .breadcrumb-item.active {
    color: #1a1a1a;
    font-weight: 600;
}

/* Gallery: ảnh lớn trên + thumbs ngang dưới — khung 4:3 */
.p2-pdp-gallery {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    width: 100%;
}
/* order: luôn đẩy thumbs xuống dưới dù HTML cũ (cache) vẫn để thumbs trước */
.p2-thumbs-col {
    order: 2;
    position: relative;
    display: block;
    width: 100%;
    flex: 0 0 auto;
}
.p2-thumbs-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.7rem;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.p2-thumbs-nav.prev { left: 4px; }
.p2-thumbs-nav.next { right: 4px; }
.p2-thumbs-nav:hover {
    border-color: var(--p2-rose);
    color: var(--p2-rose);
    background: #fff;
}
.p2-pdp-thumbs {
    --p2-thumb-gap: 8px;
    --p2-thumb-visible: 6; /* desktop: vừa ~6 thumb trong khung */
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: var(--p2-thumb-gap);
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px;
    /* Ẩn thanh trượt — cuộn bằng nút ← → */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.p2-pdp-thumbs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.p2-pdp-thumbs .thumb {
    flex: 0 0 calc((100% - (var(--p2-thumb-visible) - 1) * var(--p2-thumb-gap)) / var(--p2-thumb-visible));
    width: calc((100% - (var(--p2-thumb-visible) - 1) * var(--p2-thumb-gap)) / var(--p2-thumb-visible));
    height: auto;
    aspect-ratio: 4 / 3;
    padding: 0;
    margin: 0;
    border: none !important; /* bỏ viền đen mặc định của <button> */
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    background: #f5f5f5;
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.p2-pdp-thumbs .thumb:focus,
.p2-pdp-thumbs .thumb:focus-visible,
.p2-pdp-thumbs .thumb:active {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.p2-pdp-thumbs .thumb:hover {
    border: none !important;
    box-shadow: 0 0 0 2px #f2a0b8 !important;
}
/* Active: chỉ ring hồng brand — không dùng border (tránh đen UA) */
    .p2-pdp-thumbs .thumb.active,
    .p2-pdp-thumbs .thumb.active:hover,
    .p2-pdp-thumbs .thumb.active:focus {
        border: none !important;
        outline: none !important;
        box-shadow: 0 0 0 2px #e4416f57 !important ;
    }
.p2-pdp-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2-pdp-thumbs .thumb img.yt-thumb-fix {
    transform: scale(1.28);
    object-fit: cover;
}
.p2-pdp-thumbs .thumb-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.28); color: #fff; font-size: 1.15rem;
    pointer-events: none;
}

.p2-pdp-main {
    order: 1;
    position: relative;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 12px;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    box-shadow: none;
    outline: none;
}
.p2-pdp-main:not(.is-video) { background: #fff; }
.p2-pdp-main.is-video { background: #000; }
.p2-main-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.32s ease, transform 0.32s ease;
    will-change: opacity, transform;
    background: transparent;
}
.p2-main-media.p2-media-hide {
    opacity: 0;
    transform: scale(1.02);
}
/* Ảnh / MP4: full khung 5:3 — ảnh không nền đen */
    .p2-main-media img {
        width: 100%;
        height: 100%;
        border: 0;
        display: block;
        /*object-fit: cover;*/
         object-fit: contain;
        object-position: center;
        background: #f8f8fa;
    }
.p2-main-media video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #000;
}
/* YouTube ngang 16:9 → phóng to (cover) lấp đầy khung 5:3: rộng 106.667% = (16/9)/(5/3) nên 2 mép trái/phải gần như giữ nguyên;
   iframe cao 130% khung và căn giữa → trên/dưới bị cắt ~15% mỗi phía, che tiêu đề video, logo kênh và một phần thanh điều khiển của YouTube. */
.p2-pdp-main.is-video:not(.is-tiktok) .p2-main-media iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 130%;
    width: 106.667%;
    max-width: none;
    border: 0;
    display: block;
    transform: translate(-50%, -50%);
    background: #000;
}
/* TikTok / Shorts 9:16 → cover khung 5:3 (lấp đầy, crop trên/dưới) */
.p2-pdp-main.is-tiktok .p2-main-media iframe {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 296.296%; /* (16/9) / (3/5) = cover 9:16 trong 5:3 */
    max-width: none;
    border: 0;
    display: block;
    transform: translateY(-50%);
    background: #000;
}
.p2-main-media iframe {
    border: 0;
    display: block;
}
.p2-main-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.92);
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
    opacity: 0;
    transition: opacity .2s;
}
.p2-pdp-main:hover .p2-main-nav { opacity: 1; }
.p2-main-nav.prev { left: 10px; }
.p2-main-nav.next { right: 10px; }
/* Nút "Xem to" ảnh — đồng bộ kiểu ad-expand-btn (tròn, chỉ icon) */
.p2-pdp-main .p2-main-zoom.ad-expand-btn,
.p2-main-zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 17, 17, 0.72);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    transform: none;
}
.p2-pdp-main .p2-main-zoom.ad-expand-btn:hover,
.p2-main-zoom:hover {
    background: var(--p2-rose, #e4416f);
    transform: none;
}
.p2-main-zoom .ad-expand-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.95rem;
}

/* PDP video toolbar — đồng bộ nút phóng to + loa với tin tức / ola-ads */
.p2-pdp-main .ola-ad-video--pdp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    border-radius: 0;
}
.p2-pdp-main .ola-ad-video--pdp > .ola-ad-video__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    background: #000;
}
.p2-pdp-main.is-video:not(.is-tiktok) .ola-ad-video--pdp > .ola-ad-video__frame iframe.ad-yt-player {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 130%;
    width: 106.667%;
    max-width: none;
    border: 0;
    transform: translate(-50%, -50%);
    background: #000;
}
.p2-pdp-main.is-tiktok .ola-ad-video--pdp > .ola-ad-video__frame iframe.ad-yt-player {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 296.296%;
    max-width: none;
    border: 0;
    transform: translateY(-50%);
    background: #000;
}
.p2-pdp-main .ola-ad-video--pdp .ola-ad-video__mp4 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
.p2-pdp-main .ola-ad-video--pdp > .ola-ad-video__toolbar,
.p2-pdp-main .p2-pdp-video-toolbar {
    position: absolute !important;
    inset: auto 10px 10px auto !important;
    top: auto !important;
    left: auto !important;
    bottom: 10px !important;
    right: 10px !important;
    width: auto !important;
    height: auto !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
    transform: none !important;
}
.p2-pdp-main .ola-ad-video--pdp .ola-ad-video__toolbar-actions {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important;
}
.p2-pdp-main .ola-ad-video--pdp .ad-expand-btn,
.p2-pdp-main .ola-ad-video--pdp .sound-toggle-btn {
    position: static !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    background: rgba(17, 17, 17, 0.72) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    transform: none !important;
}
.p2-pdp-main .ola-ad-video--pdp .ad-expand-btn:hover,
.p2-pdp-main .ola-ad-video--pdp .sound-toggle-btn:hover:not(.is-toggling) {
    background: var(--p2-rose, #e4416f) !important;
    transform: none !important;
}
.p2-pdp-main .ola-ad-video--pdp .ad-expand-btn__icon,
.p2-pdp-main .ola-ad-video--pdp .sound-toggle-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.95rem;
}
.p2-pdp-main.is-video .p2-main-zoom { display: none !important; }

@media (max-width: 991.98px) {
    .p2-pdp-main {
        aspect-ratio: 5 / 3;
        width: 100%;
        max-height: none;
        margin-left: auto;
        margin-right: auto;
    }
    .p2-main-nav { opacity: 1; }
}

.p2-pdp-intro { max-width: 52rem; }
.p2-pdp-title {
    font-family: var(--p2-font);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    color: var(--p2-link);
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.p2-pdp-meta { font-size: 0.98rem; color: var(--p2-muted); }
.p2-pdp-meta strong { color: var(--p2-rose); font-weight: 600; }
.p2-sku-label { font-size: 15px; color: #655858; margin-right: 0.2rem; }

/* ShortDescription / Description / ContentBlocks — cùng Inter + cùng cỡ */
.p2-body-text,
.short-desc-box,
.p2-html-content,
.p2-html-content p,
.p2-html-content li,
.p2-html-content td,
.p2-html-content span,
.p2-desc-note,
.block-text,
.spec-clean {
    font-family: var(--p2-font) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    font-weight: 400;
}
.short-desc-box { color: #555; text-align:justify}
.p2-html-content { color: #444;     text-align: justify;}

/* Sticky buy card */
.p2-pdp-body > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.p2-pdp-sticky {
    height: max-content;
    margin-bottom: 1rem;
    width: 100%;
}
@media (min-width: 992px) {
    .p2-pdp-sticky {
        position: -webkit-sticky;
        position: sticky;
        top: var(--p2-stick-top, 88px);
        transition: top .28s cubic-bezier(.4, 0, .2, 1);
        z-index: 15;
        align-self: flex-start;
    }
}
.p2-buy-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 1.15rem 1.2rem 1.25rem;
    box-shadow: 0 4px 18px rgba(40, 10, 25, 0.05);
}

/* Mã + tồn kho — gọn, 1 hàng */
.p2-buy-card .p2-pdp-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.85rem;
    padding: 0;
    font-size: 0.92rem;
    line-height: 1.35;
}
.p2-sku-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
}
.p2-buy-card .p2-sku-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #888;
    margin: 0;
}
.p2-buy-card .p2-sku-val,
.p2-buy-card .p2-pdp-meta strong.p2-sku-val {
    font-size: 1rem;
    font-weight: 700;
    color: var(--p2-rose, #e4416f);
    letter-spacing: 0.02em;
}
.p2-stock-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.p2-stock-badge.is-in {
    background: #1db954;
    color: #fff;
}
.p2-stock-badge.is-out {
    background: #9aa0a6;
    color: #fff;
}

/* Khối giá */
.p2-price-block {
    margin: 0 0 1rem;
    padding: 0 0 0.15rem;
}
.p2-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin: 0 0 0.35rem;
}
.p2-price-sale {
    font-size: clamp(1.55rem, 2.5vw, 1.9rem);
    font-weight: 800;
    color: var(--p2-rose, #e4416f);
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.p2-price-old {
    font-size: 0.95rem;
    color: #a0a0a0;
    text-decoration: line-through;
    font-weight: 500;
}
.p2-price-pct {
    display: inline-flex;
    align-items: center;
    background: var(--p2-rose, #e4416f);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    line-height: 1.2;
}
.p2-price-save {
    font-size: 0.88rem;
    color: #888;
    margin: 0 0 0.55rem;
    font-weight: 500;
}
.p2-price-note {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #999;
}

.p2-buy-box {
    background: #f6f6f6;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 0.85rem 0.95rem 0.95rem;
    margin-bottom: 0.85rem;
}
.p2-buy-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}
.p2-buy-label {
    display: block;
    font-size: 0.88rem;
    color: #777;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.p2-qty-stepper {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.p2-qty-btn {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 0;
    background: #f4f4f4;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    color: #444;
    padding: 0;
}
.p2-qty-btn:hover { background: #ececec; color: #111; }
.p2-qty-val {
    width: 52px;
    height: 36px;
    text-align: center;
    border: 0;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-radius: 0;
    background: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    color: #222;
}
.p2-subtotal-wrap { text-align: right; }
.p2-subtotal {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1a1a1a;
}
.p2-buy-hint {
    font-size: 0.8rem;
    color: #999;
    text-align: left;
    margin: 0.4rem 0 0.7rem;
    font-style: normal;
}
.p2-buy-actions {
    display: flex;
    flex-direction: row;
    gap: 0.55rem;
    margin-bottom: 0;
}
.btn-p2-buy,
.btn-p2-cart {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    margin-bottom: 0;
    border-radius: 10px !important;
}
.btn-p2-buy {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #f04886 0%, var(--p2-rose, #e93066) 48%, #c92f5c 100%) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 0.98rem;
    text-transform: none;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 14px rgba(233, 48, 102, 0.32), 0 1px 0 rgba(255, 255, 255, 0.22) inset;
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.btn-p2-buy > i,
.btn-p2-buy > span {
    position: relative;
    z-index: 1;
}
/* Vệt sáng lướt — nhấn CTA Đặt ngay */
.btn-p2-buy::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 42%;
    height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.38) 48%, transparent 100%);
    transform: skewX(-18deg) translateX(0);
    animation: p2BuyShine 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
.btn-p2-buy:hover {
    color: #fff !important;
    filter: brightness(1.04);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(233, 48, 102, 0.4), 0 1px 0 rgba(255, 255, 255, 0.28) inset;
}
.btn-p2-buy:hover::before {
    animation-duration: 1.6s;
}
.btn-p2-buy:active {
    transform: translateY(0);
    filter: brightness(0.97);
    box-shadow: 0 3px 10px rgba(233, 48, 102, 0.28);
}
@keyframes p2BuyShine {
    0%, 62% { transform: skewX(-18deg) translateX(0); opacity: 0; }
    68% { opacity: 1; }
    88% { transform: skewX(-18deg) translateX(320%); opacity: 0.85; }
    100% { transform: skewX(-18deg) translateX(320%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .btn-p2-buy::before { animation: none; display: none; }
    .btn-p2-buy,
    .btn-p2-buy:hover,
    .btn-p2-buy:active { transition: none; transform: none; }
}
.btn-p2-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 48px;
    padding: 0.65rem 0.75rem;
    background: #fff !important;
    border: 1px solid #d0d0d0 !important;
    color: #333 !important;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: none;
    letter-spacing: 0.01em;
    transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.btn-p2-cart:hover {
    background: #f7f7f7 !important;
    border-color: #bbb !important;
    color: #111 !important;
}
.btn-p2-buy i,
.btn-p2-cart i {
    font-size: 0.95em;
    line-height: 1;
}
.btn-p2-buy:disabled,
.btn-p2-buy.disabled {
    opacity: .55;
    pointer-events: none;
    box-shadow: none;
    transform: none;
}
.btn-p2-buy:disabled::before,
.btn-p2-buy.disabled::before {
    animation: none;
    display: none;
}

.p2-intro-note {
    background: #faf6f8;
    border: 1px dashed #e5c9d4;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #5a3a45;
}

/* Call / Zalo — ghost, không cạnh tranh CTA */
.p2-contact-row {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0 0.65rem;
}
.p2-contact-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.65rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none !important;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.p2-contact-btn i { font-size: 0.9rem; opacity: 0.75; }
.p2-contact-call,
.p2-contact-zalo {
    background: #fff;
    color: #555 !important;
    border: 1px solid #e5e5e5;
}
.p2-contact-call:hover,
.p2-contact-zalo:hover {
    background: #f8f8f8;
    border-color: #d0d0d0;
    color: #222 !important;
    transform: none;
}

/* Hotline — CTA cân bằng: số nổi, pulse nhẹ, không spam */
.p2-hotline-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.8rem 0.95rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #fff7fa 0%, #ffffff 55%, #fff5f8 100%);
    border: 0px solid rgba(228, 65, 111, 0.28);
    box-shadow: 0 0 0 0 rgba(228, 65, 111, 0.12);
    animation: p2HotlineBreathe 2.8s ease-in-out infinite;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}
.p2-hotline-banner:hover {
    transform: translateY(-1px);
    border-color: rgba(228, 65, 111, 0.45);
    box-shadow: 0 6px 18px rgba(228, 65, 111, 0.14);
}
@keyframes p2HotlineBreathe {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(228, 65, 111, 0.1), 0 2px 8px rgba(228, 65, 111, 0.06);
        border-color: rgba(228, 65, 111, 0.28);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(228, 65, 111, 0.08), 0 4px 14px rgba(228, 65, 111, 0.12);
        border-color: rgba(228, 65, 111, 0.4);
    }
}
.p2-hotline-ico {
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 50%;
    background: rgba(228, 65, 111, 0.1);
    color: var(--p2-rose, #e4416f);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    animation: p2HotlineHeartbeat 1.6s ease-in-out infinite;
}
@keyframes p2HotlineHeartbeat {
    0%, 100% { transform: scale(1); }
    14% { transform: scale(1.12); }
    28% { transform: scale(1); }
    42% { transform: scale(1.08); }
    56% { transform: scale(1); }
}
.p2-hotline-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.p2-hotline-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #8a6a73;
    text-transform: none;
    letter-spacing: 0;
}
.p2-hotline-nums {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.25;
}
.p2-hotline-nums a {
    color: var(--p2-rose, #e4416f) !important;
    text-decoration: none !important;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.p2-hotline-nums a:hover,
.p2-hotline-nums a:focus {
    color: var(--p2-rose-dark, #c92f5c) !important;
    text-decoration: underline !important;
}
.p2-hotline-sep { color: rgba(228, 65, 111, 0.45); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
    .p2-hotline-banner,
    .p2-hotline-ico {
        animation: none !important;
    }
    .p2-hotline-banner:hover {
        transform: none;
    }
}

.p2-hotline-line {
    font-size: 0.9rem;
    color: var(--p2-accent-dark, #c92f5c);
    font-weight: 600;
    margin-bottom: 0.85rem;
}
.p2-hotline-line a { color: var(--p2-accent, #ea4575); font-weight: 700; }

.p2-trust-box {
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 0.15rem 0.9rem;
    background: #fff;
}
.p2-trust-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0e6ea;
}
.p2-trust-item:last-child { border-bottom: 0; }
.p2-trust-ico {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff0f5;
    color: var(--p2-rose, #ea4575);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}
.p2-trust-title {
    font-weight: 800;
    color: var(--p2-rose, #ea4575);
    font-size: 1rem;
    margin-bottom: 0.1rem;
}
.p2-trust-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.45;
}

.p2-pdp-tabs .nav-tabs { border-bottom: 1px solid var(--p2-line); }
.p2-pdp-tabs .nav-link {
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 0.9rem;
}
.p2-pdp-tabs .nav-link.active {
    color: var(--p2-ink);
    background: transparent;
    border-bottom-color: var(--p2-rose, #ea4575);
}
.p2-pdp-tab-content {
    background: transparent;
    border: 0 !important;
    padding: 0.85rem 0 0 !important;
    margin: 0;
}

.p2-clamp { position: relative; }
.p2-clamp.is-clamped .p2-clamp__body {
    max-height: var(--p2-clamp-h, 960px);
    overflow: hidden;
}
.p2-clamp.is-clamped::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2.5rem;
    height: 72px;
    background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
    pointer-events: none;
}
.p2-clamp.is-open .p2-clamp__body { max-height: none; }
.p2-clamp.is-open::after { display: none; }
.p2-clamp__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin: 1rem auto 0;
    padding: 0.55rem 1.35rem;
    border: 1.5px solid var(--p2-rose, #e4416f);
    border-radius: 999px;
    background: #fff;
    color: var(--p2-rose, #e4416f);
    font-family: var(--p2-font);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(228, 65, 111, 0.12);
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.p2-clamp { text-align: left; }
.p2-clamp > .p2-clamp__btn {
    display: flex;
    margin-left: auto;
    margin-right: auto;
}
.p2-clamp__btn:hover {
    background: var(--p2-rose, #e4416f);
    color: #fff;
    transform: translateY(-1px);
}
.p2-clamp.is-open .p2-clamp__more { display: none; }
.p2-clamp:not(.is-open) .p2-clamp__less { display: none; }

html.p2-fancybox-open .btn-back-to-top,
html.p2-fancybox-open .zalo-chat-widget,
html.p2-fancybox-open .fab-group {
    visibility: hidden !important;
    pointer-events: none !important;
}

#custom-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.9);
    z-index: 9999; display: none; align-items: center; justify-content: center;
}
#custom-overlay.open { display: flex; }
#custom-overlay .overlay-close {
    position: absolute; top: 16px; right: 20px; color: #fff; font-size: 2.5rem; cursor: pointer;
}
#overlay-img { max-width: 90%; max-height: 90vh; object-fit: contain; }
.overlay-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    color: #fff; font-size: 1.75rem; cursor: pointer;
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.12); border-radius: 50%;
}
.nav-prev { left: 16px; } .nav-next { right: 16px; }

.related-slider .txt .title {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
}
.related-slider .price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--p2-ink);
    letter-spacing: 0;
    white-space: nowrap;
}
.related-slider .off {
    font-size: 0.9rem;
}
.related-slider {
    display: flex; gap: 1rem; overflow-x: auto; scroll-behavior: smooth;
    scrollbar-width: none; padding: 0.5rem 0.25rem;
}
.related-slider::-webkit-scrollbar { display: none; }
.slider-item { flex: 0 0 calc(25% - 0.75rem); min-width: 200px; }

.p2-related-section {
    position: relative;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--p2-line);
}
/* Dùng đúng .p2-ftabs__nav / .p2-ftabs__pill từ shop-p2-layout (trang chủ) */
.p2-related-section.p2-ftabs {
    background: transparent;
    padding-bottom: 0.5rem;
}
.p2-related-section .p2-ftabs__pane {
    text-align: left;
}
.p2-related {
    position: relative;
    padding: 0;
}
/* Nút ← →: dùng đúng .slick-prev/.slick-next của trang chủ (shop-p2-layout) */
.p2-related .slick-prev,
.p2-related .slick-next {
    top: var(--p2-arrow-y, 50%);
    width: 44px;
    height: 44px;
    /* luôn trong khung như home ≤1349px — có shadow, nền trắng mờ */
    background: rgba(255,255,255,.94);
    border-color: rgba(0,0,0,.06);
    box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
.p2-related .slick-prev { left: 10px; }
.p2-related .slick-next { right: 10px; }

@media (max-width: 991.98px) {
    .p2-pdp-sticky { position: static; }
    .p2-pdp-thumbs { --p2-thumb-visible: 4; }
    .p2-related .slick-prev,
    .p2-related .slick-next {
        width: 40px;
        height: 40px;
    }
}
@media (max-width: 768px) {
    .slider-item { flex: 0 0 70%; }
    .p2-pdp-thumbs { --p2-thumb-visible: 3; }
    .p2-buy-actions { gap: 0.45rem; }
    .btn-p2-buy, .btn-p2-cart { font-size: 0.82rem; min-height: 44px; padding: 0.55rem 0.45rem; }
    .p2-contact-btn { min-height: 38px; font-size: 0.82rem; }
}

/* PDP tabs + mô tả kiểu Tour */
.p2-pdp-tabs .nav-tabs .nav-link {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.7rem 1rem;
}
.p2-pdp-tabs .tab-content {
    font-family: var(--p2-font);
    font-size: 1.05rem;
    line-height: 1.7;
    border: 0;
    padding: 0;
    background: transparent;
}
.p2-html-content p { margin-bottom: 0.85rem; }
.p2-html-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    margin: 0.75rem auto;
    cursor: zoom-in;
}
/* Admin chọn H1–H6: giới hạn cỡ để nội dung vẫn cân đối */
.p2-html-content h1,
.p2-html-content h2,
.p2-html-content h3,
.p2-html-content h4,
.p2-html-content h5,
.p2-html-content h6,
.spec-clean h1,
.spec-clean h2,
.spec-clean h3,
.spec-clean h4,
.spec-clean h5,
.spec-clean h6,
.block-text h1,
.block-text h2,
.block-text h3,
.block-text h4,
.block-text h5,
.block-text h6 {
    font-family: var(--p2-font) !important;
    color: var(--p2-ink);
    font-weight: 700 !important;
    margin: 1rem 0 0.5rem;
    line-height: 1.4 !important;
}
.p2-html-content h1, .spec-clean h1, .block-text h1 { font-size: 1.28rem !important; }
.p2-html-content h2, .spec-clean h2, .block-text h2 { font-size: 1.2rem !important; }
.p2-html-content h3, .spec-clean h3, .block-text h3 { font-size: 1.12rem !important; }
.p2-html-content h4, .spec-clean h4, .block-text h4 { font-size: 1.08rem !important; }
.p2-html-content h5, .spec-clean h5, .block-text h5,
.p2-html-content h6, .spec-clean h6, .block-text h6 { font-size: 1.05rem !important; }
.p2-html-content strong,
.p2-html-content b,
.spec-clean strong,
.spec-clean b {
    font-weight: 700;
    font-size: inherit !important;
}
.p2-html-content ul,
.p2-html-content ol { padding-left: 1.25rem; margin-bottom: 0.85rem; }
.p2-html-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
    font-size: 1.05rem !important;
}
.p2-html-content table th,
.p2-html-content table td {
    border: 1px solid #e8e8e8;
    padding: 0.5rem 0.65rem;
    vertical-align: top;
    font-size: inherit !important;
}
.p2-desc-hero img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border-radius: 12px;
}
.p2-desc-note {
    font-style: italic;
    color: #777;
    font-size: 0.95rem;
}
.p2-desc-gallery {
    display: grid;
    gap: 8px;
}
.p2-gal-1 { grid-template-columns: 1fr; }
.p2-gal-2 { grid-template-columns: 1fr 1fr; }
.p2-gal-3 { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; }
.p2-gal-3 .p2-gal-item:first-child { grid-row: 1 / span 2; }
.p2-gal-4 { grid-template-columns: 1fr 1fr; }
.p2-gal-5 { grid-template-columns: repeat(6, 1fr); }
.p2-gal-5 .p2-gal-item:nth-child(1) { grid-column: span 3; }
.p2-gal-5 .p2-gal-item:nth-child(2) { grid-column: span 3; }
.p2-gal-5 .p2-gal-item:nth-child(n+3) { grid-column: span 2; }
.p2-gal-item {
    display: block;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f3f3;
}
.p2-gal-item img {
    width: 100%;
    height: 100%;
    min-height: 140px;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.p2-gal-item:hover img { transform: scale(1.04); }

.p2-intro-heading {
    font-family: var(--p2-font) !important;
    font-size: 1.12rem !important;
    font-weight: 800;
    color: var(--p2-ink);
    margin: 0 0 0.75rem;
    line-height: 1.4;
}
.p2-intro-row {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
    font-family: var(--p2-font) !important;
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
}
.p2-intro-row i {
    color: var(--p2-rose, #e4416f);
    width: 1.15rem;
    text-align: center;
    margin-top: 0.2rem;
}
.p2-intro-row a {
    color: var(--p2-rose, #e4416f);
    font-weight: 700;
    text-decoration: none;
}
.p2-intro-row a:hover { text-decoration: underline; }

/* Content pages */
.page-header-simple {
    background: linear-gradient(135deg, #5d1a3a 0%, #2c0a1c 100%);
    color: #fff;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
}
.page-header-simple h1 { color: #fff !important; font-family: var(--p2-font); }
.content-body { background: #fff; padding: 1.5rem; border-radius: var(--p2-radius); border: 1px solid var(--p2-line); }

/* ========== NEWS LIST ========== */
.p2-page-hero {
    background: linear-gradient(135deg, #5d1a3a 0%, #2c0a1c 100%);
    color: #fff;
    padding: 2rem 0 1.75rem;
    margin-bottom: 1.75rem;
}
.p2-page-hero h1,
.p2-page-hero .page-title {
    color: #fff !important;
    font-family: var(--p2-font);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    margin: 0 0 0.35rem;
}
.p2-page-hero p,
.p2-page-hero .text-muted { color: rgba(255,255,255,.78) !important; margin: 0; }

.news-item {
    display: flex;
    gap: 1.25rem;
    background: #fff;
    border: 1px solid var(--p2-line);
    border-radius: var(--p2-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    transition: box-shadow .2s ease;
}
.news-item:hover { box-shadow: 0 10px 28px rgba(0,0,0,.06); }
.news-thumb {
    flex: 0 0 220px;
    max-width: 220px;
    display: block;
    overflow: hidden;
    border-radius: var(--p2-radius);
    background: #eee;
}
.news-thumb img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}
.news-content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.news-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.4rem; }
.news-title a { color: var(--p2-ink); }
.news-title a:hover { color: var(--p2-gold); }
.news-meta { font-size: 0.8rem; color: var(--p2-muted); margin-bottom: 0.5rem; }
.news-desc { color: #666; font-size: 0.95rem; margin-bottom: 0.75rem; flex: 1; }
.news-item .btn-view {
    align-self: flex-start;
    color: var(--p2-gold-dark);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
}
.news-item .btn-view:hover { color: var(--p2-gold); }
@media (max-width: 767.98px) {
    .news-item { flex-direction: column; }
    .news-thumb { flex: none; max-width: none; width: 100%; }
    .news-thumb img { height: 180px; }
}

.sidebar-sticky { position: sticky; top: var(--p2-stick-top, 88px); transition: top .28s cubic-bezier(.4, 0, .2, 1); }
.sidebar-box {
    background: #fff;
    border: 1px solid var(--p2-line);
    border-radius: var(--p2-radius);
    padding: 1rem 1.1rem;
    margin-bottom: 1.25rem;
}
.sidebar-title {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.95rem;
    color: var(--p2-ink);
    margin: 0 0 0.75rem;
    padding-bottom: 0.45rem;
    border-bottom: 2px solid var(--p2-gold);
}
.cat-list { list-style: none; padding: 0; margin: 0; }
.cat-list li { border-bottom: 1px solid #f0f0f0; }
.cat-list li:last-child { border-bottom: 0; }
.cat-list a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.55rem 0; color: #555; font-weight: 500;
}
.cat-list a:hover { color: var(--p2-gold); }
.cat-count { color: #999; font-size: 0.8rem; }

.hot-news-item {
    display: flex; gap: 0.75rem; margin-bottom: 0.85rem;
    padding-bottom: 0.85rem; border-bottom: 1px solid #f0f0f0;
}
.hot-news-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.hot-news-item img {
    width: 72px; height: 72px; object-fit: cover; border-radius: 4px; flex-shrink: 0;
}
.hot-news-item a { color: var(--p2-ink); font-weight: 600; font-size: 0.9rem; }
.hot-news-item a:hover { color: var(--p2-gold); }

.pagination .page-link {
    color: #4a4a4a;
    border-color: #eadfe3;
    border-radius: 999px;
}
.pagination .page-item.active .page-link {
    background: var(--p2-gold);
    border-color: var(--p2-gold);
    color: #fff;
}

/* ========== NEWS DETAIL ========== */
.p2-post-wrap { padding: 1.5rem 0 3rem; }
.p2-post-card {
    background: #fff;
    border: 1px solid var(--p2-line);
    border-radius: var(--p2-radius);
    padding: 1.5rem;
}
.post-title {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 800;
    color: var(--p2-ink);
    margin-bottom: 0.75rem;
    line-height: 1.3;
}
.post-meta {
    display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem;
    color: var(--p2-muted); font-size: 0.875rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--p2-line);
}
.post-content, .content-blocks, .main-content-wrap {
    font-size: 1.02rem;
    line-height: 1.75;
    color: #444;
}
.post-content img, .content-blocks img, .main-content-wrap img {
    max-width: 100%; height: auto; border-radius: var(--p2-radius); margin: 0.75rem 0;
}
.post-slider { margin-bottom: 1.25rem; border-radius: var(--p2-radius); overflow: hidden; border: none; background: #fff; box-shadow: none; }
.related-card { margin-bottom: 1rem; }
.related-card .related-img,
.related-card img.related-img,
.related-card img {
    width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--p2-radius); margin-bottom: 0.5rem;
}
.related-title { font-size: 0.95rem; font-weight: 700; margin: 0; }
.related-title a { color: var(--p2-ink); }
.related-title a:hover { color: var(--p2-gold); }
.p2-section-label {
    font-weight: 800; text-transform: uppercase; font-size: 1.05rem;
    border-left: 4px solid var(--p2-gold); padding-left: 0.65rem; margin-bottom: 1rem;
}
.sidebar-prod-item {
    display: flex; gap: 0.75rem; margin-bottom: 0.85rem;
    padding-bottom: 0.85rem; border-bottom: 1px solid #f0f0f0;
}
.sidebar-prod-img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; }
.sidebar-prod-title a { color: var(--p2-ink); font-size: 0.88rem; font-weight: 600; }
.sidebar-prod-title a:hover { color: var(--p2-gold); }

/* ========== ABOUT ========== */
.p2-about-quote {
    background: #fff;
    border: 1px solid var(--p2-line);
    border-left: 4px solid var(--p2-gold);
    border-radius: var(--p2-radius);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}
.p2-about-quote h5 { color: var(--p2-gold-dark); font-weight: 800; text-transform: uppercase; font-size: 0.95rem; }
.info-card {
    background: #fff;
    border: 1px solid var(--p2-line);
    border-radius: var(--p2-radius);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.info-label {
    display: block; font-size: 0.75rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--p2-muted); font-weight: 700; margin-top: 0.75rem;
}
.info-text { color: var(--p2-ink); font-weight: 600; }
.social-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; color: #fff !important;
    margin: 0 4px; font-size: 1rem;
}
.p2-cert-box {
    display: inline-flex; align-items: center; gap: 0.85rem;
    background: #fff; border: 1px solid var(--p2-line);
    border-radius: 999px; padding: 0.75rem 1.25rem;
}

/* ========== CONTACT ========== */
.page-header-contact,
.p2-page-hero.contact {
    background: linear-gradient(135deg, #4a4a4a 0%, #303e50 100%);
    color: #fff; padding: 2rem 0; margin-bottom: 1.5rem;
}
.page-header-contact h1 { color: #fff !important; font-weight: 800; text-transform: uppercase; }
.contact-info-pro, .contact-form-box {
    background: #fff; border: 1px solid var(--p2-line);
    border-radius: var(--p2-radius); padding: 1.5rem; height: 100%;
    box-shadow: none;
}
.contact-info-pro h4, .contact-form-box h4 {
    color: var(--p2-ink) !important; font-weight: 800;
    border-bottom: 2px solid var(--p2-gold) !important;
    padding-bottom: 0.5rem; margin-bottom: 1.25rem;
}
.info-icon {
    width: 48px; height: 48px; min-width: 48px;
    background: rgba(212,160,23,.12); color: var(--p2-gold-dark);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-right: 1rem; box-shadow: none;
}
.info-title { font-size: 0.75rem; font-weight: 700; color: var(--p2-muted); text-transform: uppercase; margin-bottom: 0.35rem; }
.info-desc { color: #555; margin: 0; }
.info-phone-1 { font-size: 1.25rem; font-weight: 800; color: var(--p2-ink); display: block; }
.info-phone-2 { font-size: 1.25rem; font-weight: 800; color: var(--p2-rose); display: block; }
.contact-form-box .form-control {
    border-color: var(--p2-line); border-radius: var(--p2-radius);
    min-height: 44px; font-family: var(--p2-font);
}
.contact-form-box .form-control:focus {
    border-color: var(--p2-gold); box-shadow: 0 0 0 .2rem rgba(212,160,23,.2);
}
.btn-p2-submit {
    background: var(--p2-gold) !important; border: 0 !important; color: #fff !important;
    font-weight: 800; text-transform: uppercase; min-height: 46px; padding: 0.65rem 2rem;
}
.btn-p2-submit:hover { background: var(--p2-gold-dark) !important; }
.map-frame iframe { width: 100%; min-height: 360px; border: 0; display: block; }
.overlay-loader {
    position: fixed; inset: 0; background: rgba(255,255,255,.88); z-index: 99999;
    display: none; justify-content: center; align-items: center; flex-direction: column;
}
.spinner {
    width: 48px; height: 48px; border: 4px solid #eee; border-top-color: var(--p2-gold);
    border-radius: 50%; animation: p2spin 1s linear infinite;
}
@keyframes p2spin { to { transform: rotate(360deg); } }

/* ========== CMS PAGES ========== */
.sidebar-widget {
    background: #fff; border: 1px solid var(--p2-line);
    border-radius: var(--p2-radius); padding: 1.15rem; margin-bottom: 1rem;
}
.widget-title {
    font-weight: 800; text-transform: uppercase; font-size: 0.95rem;
    border-bottom: 2px solid var(--p2-gold); padding-bottom: 0.45rem; margin-bottom: 0.85rem;
}
.contact-list li { margin-bottom: 0.55rem; color: #555; }
.related-card .related-img-col { flex: 0 0 96px; }
.related-card .related-img-col img { width: 96px; height: 72px; object-fit: cover; border-radius: 4px; }
.main-gallery-wrap { margin-bottom: 1rem; border-radius: var(--p2-radius); overflow: hidden; border: 1px solid var(--p2-line); }
.slide-video-overlay {
    position: absolute; inset: 0; z-index: 10; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.slide-video-overlay:hover { background: rgba(0,0,0,.28); }
.p2-pages-wrap .main-content-wrap {
    background: #fff; border: 1px solid var(--p2-line);
    border-radius: var(--p2-radius); padding: 1.5rem;
}
.related-list-card {
    display: flex; gap: 0.85rem; margin-bottom: 0.85rem;
    padding-bottom: 0.85rem; border-bottom: 1px solid #f0f0f0;
}
.related-list-card:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.related-list-card .related-img-col { flex: 0 0 96px; }
.related-list-card .related-img-col img {
    width: 96px; height: 72px; object-fit: cover; border-radius: 4px; margin: 0;
}
.info-item { display: flex; align-items: flex-start; margin-bottom: 1.25rem; }
.info-hotline { color: var(--p2-gold-dark) !important; font-size: 1.15rem; }
.branches-pre { white-space: pre-line; }

/* CTA block */
.cta-pro-wrapper {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(135deg, #fff8e8 0%, #fff 55%);
    border: 1px solid #f0dfa0; border-radius: var(--p2-radius);
}
.cta-pro-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--p2-gold); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.25rem;
}
.cta-pro-content { flex: 1; min-width: 180px; }
.cta-pro-title { font-weight: 800; margin: 0 0 0.25rem; font-size: 1rem; color: var(--p2-ink); }
.cta-pro-desc { margin: 0; color: var(--p2-muted); font-size: 0.9rem; }
.btn-cta-pulse {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--p2-gold); color: #fff !important; font-weight: 800;
    padding: 0.65rem 1.1rem; border-radius: 999px; text-decoration: none !important;
}
.btn-cta-pulse:hover { background: var(--p2-gold-dark); color: #fff !important; }
.sidebar-prod-price { color: var(--p2-gold-dark); font-weight: 700; font-size: 0.85rem; }
.btn-outline-p2 {
    color: var(--p2-gold-dark); border-color: var(--p2-gold);
}
.btn-outline-p2:hover { background: var(--p2-gold); color: #fff; border-color: var(--p2-gold); }


/* ==== shop-p2-layout.css ==== */
/* =============================================================
   SHOP/P2 — LỚP BỐ CỤC (header, menu, khối sản phẩm, footer)
   Dựng lại bố cục cũ trên nền Bootstrap 5 + font Inter.
   Thay thế hoàn toàn bộ CSS cũ: main.css, responsive.css, custom.css,
   bootstrap 3, animate.css, icon-fonts.css.
   Nạp SAU shop-p2-theme.css.
   ============================================================= */

/* Màu chuẩn của mẫu: hồng sen #e93066.
   Mọi sắc độ khác đều dẫn xuất từ màu này để cả trang cùng một tông. */
:root {
    --p2-accent: #e93066;
    --p2-accent-dark: #c92f5c;
    --p2-accent-soft: #fdeef3;
    --p2-accent-light: #ff9dba;
    --p2-hover: #e93066;
    --p2-heading: #4c3b42;
    --p2-text: #5b5b5b;
    --p2-line: #e6e6e6;
    --p2-topbar-bg: #e93066;
    --p2-topbar-fg: #ffffff;
    --p2-footer-bg: #d83287;
    --p2-gold: #e93066;
    --p2-gold-dark: #c92f5c;
    --p2-rose: #e93066;
    --p2-ink: #4a4a4a;
    --p2-bg: #fff;
    --bs-primary: #e93066;
    --bs-primary-rgb: 234,69,117;
}

/* Nút Bootstrap dùng biến riêng nên phải ánh xạ lại sang màu chuẩn */
.shop-p2-body .btn-primary {
    --bs-btn-bg: var(--p2-accent);
    --bs-btn-border-color: var(--p2-accent);
    --bs-btn-hover-bg: var(--p2-accent-dark);
    --bs-btn-hover-border-color: var(--p2-accent-dark);
    --bs-btn-active-bg: var(--p2-accent-dark);
    --bs-btn-active-border-color: var(--p2-accent-dark);
    --bs-btn-disabled-bg: var(--p2-accent);
    --bs-btn-disabled-border-color: var(--p2-accent);
}

.shop-p2-body .btn-outline-primary {
    --bs-btn-color: var(--p2-accent);
    --bs-btn-border-color: var(--p2-accent);
    --bs-btn-hover-bg: var(--p2-accent);
    --bs-btn-hover-border-color: var(--p2-accent);
    --bs-btn-active-bg: var(--p2-accent-dark);
    --bs-btn-active-border-color: var(--p2-accent-dark);
}

body.shop-p2-body {
    background: #fff;
    color: var(--p2-text);
    font-size: 14px;
    line-height: 1.6;
    min-height: 100%;
}

html {
    height: 100%;
    /* Luôn giữ cột scrollbar — mở popup không đổi chiều ngang (hết giật trái) */
    overflow-y: scroll;
}

/* Sticky footer: nội dung ngắn (hay gặp sau khi thoát DevTools mobile → PC)
   thì footer vẫn dính đáy viewport, không để dải trắng dưới footer. */
body.shop-p2-body,
body.shop-p2-body > form,
#wrapper,
.w1 {
    min-height: 100%;
}

body.shop-p2-body > form,
#wrapper,
.w1 {
    display: flex;
    flex-direction: column;
}

.w1 {
    flex: 1 0 auto;
    min-height: 100vh;
    min-height: 100dvh;
}

.p2-main {
    flex: 1 0 auto;
    width: 100%;
}

#mt-footer {
    flex-shrink: 0;
    margin-bottom: 0;
}

.shop-p2-body .container {
    max-width: 1230px;
}

/* Dưới 1230px container chạy sát mép nên cần thêm lề an toàn hai bên */
@media (max-width: 1229.98px) {
    .shop-p2-body .container {
        padding-right: 16px;
        padding-left: 16px;
    }
}

.shop-p2-body h1,
.shop-p2-body h2,
.shop-p2-body h3,
.shop-p2-body h4,
.shop-p2-body .heading {
    color: var(--p2-heading);
}

/* ===================== HEADER ===================== */
#mt-header {
    position: relative;
    z-index: 100;
    background: #fff;
}

.mt-top-bar {
    position: relative;
    /* Nền gốc mẫu P2 (hồng sen) — giữ tông như trước */
    background: linear-gradient(341deg, #eb2784 30%, var(--p2-footer-bg) 45%, #f80fa8 100%);
    color: #fff;
    font-size: 13px;
    /* Gọn hơn một chút so với bản cũ, vẫn chừa chỗ sóng */
    padding: 6px 0 10px;
}

    /* Che khe anti-alias 1px (vạch đen) mép hồng → sóng */
    .mt-top-bar:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        height: 2px;
        background: #fff;
        pointer-events: none;
    }

    .mt-top-bar > .container {
        position: relative;
        z-index: 2;
    }

    .mt-top-bar .container > .row {
        align-items: center;
        min-height: 36px;
    }

/* Sóng đáy thanh trên — path/biên độ như trước */
.p2-topbar-wave {
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    z-index: 1;
    height: clamp(16px, 1.9vw, 24px);
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}

    .p2-topbar-wave svg {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 200%;
        height: 100%;
        animation: p2FooterWaveDrift 32s linear infinite;
    }

    .p2-topbar-wave path {
        fill: #fff;
        stroke: #fff;
        stroke-width: 1.5;
        shape-rendering: geometricPrecision;
    }

@media (prefers-reduced-motion: reduce) {
    .p2-topbar-wave svg {
        animation: none !important;
    }
}

    .mt-top-bar a {
        color: var(--p2-topbar-fg);
    }

        .mt-top-bar a:hover {
            color: #ffe0ea;
        }

    .mt-top-bar .tel,
    .mt-top-bar #mail {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-right: 22px;
        color: var(--p2-topbar-fg);
    }

        .mt-top-bar .tel i,
        .mt-top-bar #mail i {
            color: rgba(255,255,255,.82);
        }

/* Account + giỏ hàng — 1 hàng gọn, phải thanh trên */
.mt-top-bar .mt-sh-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

/* Top bar: nút account gọn, khớp giỏ tròn nhỏ */
.mt-top-bar .mt-auth-btn {
    min-height: 30px;
    padding: 0 10px;
    font-size: 11px;
}

.mt-top-bar .mt-auth-btn--account.is-logged-in {
    min-height: 30px;
    padding: 2px 10px 2px 2px;
    font-size: 11px;
}

.mt-top-bar .mt-sh-cart {
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.mt-auth-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: transparent;
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.mt-auth-btn:hover,
.mt-auth-btn:focus {
    background: rgba(255, 255, 255, 0.16);
    color: #fff !important;
}

/* Guest: nút Đăng nhập như trước — nền trong suốt, viền/chữ trắng */
.mt-top-bar .mt-auth-btn--account:not(.is-logged-in) {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 29%);
    color: #fff !important;
}

.mt-top-bar .mt-auth-btn--account:not(.is-logged-in):hover,
.mt-top-bar .mt-auth-btn--account:not(.is-logged-in):focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
    color: #fff !important;
}

/* Đã login: cùng nền với nút Đăng nhập (trong suốt + viền trắng), avatar sát mép trái */
.mt-auth-btn--account.is-logged-in {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 29%);
    color: #fff !important;
    max-width: 148px;
    min-height: 30px;
    padding: 2px 10px 2px 2px;
    gap: 6px;
    box-shadow: none;
}

.mt-auth-btn--account.is-logged-in:hover,
.mt-auth-btn--account.is-logged-in:focus {
    background: rgba(255, 255, 255, 0.16);
    border-color: #fff;
    color: #fff !important;
    box-shadow: none;
}

.mt-auth-btn--account .ola-cauth-header-avatar {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    display: none;
    flex-shrink: 0;
    box-shadow: none;
}

.mt-auth-btn--account .ola-cauth-header-avatar.is-visible {
    display: block;
}

.mt-auth-btn--account.is-logged-in.has-avatar {
    padding-left: 2px;
}

.mt-auth-btn--account #olaHeaderAccountLabel {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.mt-auth-btn--account .ola-cauth-header-icon {
    font-size: 12px;
}

/* Giỏ hàng tròn nhỏ gọn — tông hồng sen P2 */
.mt-cart-btn,
.mt-cart-btn--icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    border: none;
    background: var(--p2-accent);
    color: #fff !important;
    font-size: 0;
    line-height: 1;
    text-transform: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(233, 48, 102, 0.28);
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}

.mt-cart-btn:hover,
.mt-cart-btn:focus,
.mt-cart-btn--icon:hover,
.mt-cart-btn--icon:focus {
    background: var(--p2-accent-dark);
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(201, 47, 92, 0.35);
}

.mt-cart-btn:active,
.mt-cart-btn--icon:active {
    transform: scale(.96);
}

.mt-cart-btn > i,
.mt-cart-btn--icon > i {
    font-size: 14px;
    line-height: 1;
}

.mt-cart-btn .mt-cart-btn__text,
.mt-cart-btn--icon .mt-cart-btn__text {
    display: none !important;
}

.mt-cart-btn .p2-cart-badge,
.mt-cart-btn--icon .p2-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 50%;
    background: #fff;
    color: var(--p2-accent-dark);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

/* Có sản phẩm trong giỏ — nhịp nhẹ để thu hút chú ý */
.mt-cart-btn.has-items,
.mt-cart-btn--icon.has-items {
    animation: p2CartIdlePulse 2.4s ease-in-out infinite;
}

.mt-cart-btn.has-items .p2-cart-badge,
.mt-cart-btn--icon.has-items .p2-cart-badge {
    background: #fff5f8;
    color: var(--p2-accent-dark);
    box-shadow: 0 0 0 2px rgba(233, 48, 102, 0.22), 0 1px 4px rgba(233, 48, 102, 0.25);
}

/* Vừa thêm SP — nảy mạnh một lần */
.mt-cart-btn.ola-cart-bump,
.mt-cart-btn--icon.ola-cart-bump {
    animation: p2CartBump .55s cubic-bezier(.22, 1.2, .36, 1);
}

.mt-cart-btn.ola-cart-bump .p2-cart-badge,
.mt-cart-btn--icon.ola-cart-bump .p2-cart-badge {
    animation: p2CartBadgePop .55s ease;
}

@keyframes p2CartIdlePulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(233, 48, 102, 0.28); transform: scale(1); }
    50% { box-shadow: 0 4px 14px rgba(233, 48, 102, 0.42); transform: scale(1.04); }
}

@keyframes p2CartBump {
    0% { transform: scale(1); }
    35% { transform: scale(1.18); }
    70% { transform: scale(0.96); }
    100% { transform: scale(1); }
}

@keyframes p2CartBadgePop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mt-cart-btn.has-items,
    .mt-cart-btn--icon.has-items,
    .mt-cart-btn.ola-cart-bump,
    .mt-cart-btn--icon.ola-cart-bump,
    .mt-cart-btn.ola-cart-bump .p2-cart-badge,
    .mt-cart-btn--icon.ola-cart-bump .p2-cart-badge {
        animation: none !important;
    }
}

/* Top bar hồng: nút trắng + icon hồng để nổi trên nền */
.mt-top-bar .mt-cart-btn,
.mt-top-bar .mt-cart-btn--icon {
    width: 30px;
    height: 30px;
    min-height: 30px;
    background: #e2e8f0;
    color: var(--p2-accent) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mt-top-bar .mt-cart-btn.has-items,
.mt-top-bar .mt-cart-btn--icon.has-items {
    animation: p2CartIdlePulseTop 2.4s ease-in-out infinite;
}

@keyframes p2CartIdlePulseTop {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); transform: scale(1); }
    50% { box-shadow: 0 3px 12px rgba(233, 48, 102, 0.35); transform: scale(1.05); }
}

.mt-top-bar .mt-cart-btn:hover,
.mt-top-bar .mt-cart-btn:focus,
.mt-top-bar .mt-cart-btn--icon:hover,
.mt-top-bar .mt-cart-btn--icon:focus {
    background: var(--p2-accent-soft);
    color: var(--p2-accent-dark) !important;
}

.mt-top-bar .mt-cart-btn > i,
.mt-top-bar .mt-cart-btn--icon > i {
    font-size: 13px;
}

.mt-top-bar .mt-cart-btn .p2-cart-badge,
.mt-top-bar .mt-cart-btn--icon .p2-cart-badge {
    background: var(--p2-accent-dark);
    color: #fff;
    box-shadow: 0 0 0 1.5px #fff;
}

/* Thanh menu trắng: vòng hồng sen */
.mt-bottom-bar .mt-cart-btn,
.mt-bottom-bar .mt-cart-btn--icon {
    width: 34px;
    height: 34px;
    min-height: 34px;
    background: var(--p2-accent);
    color: #fff !important;
}

.mt-bottom-bar .mt-cart-btn:hover,
.mt-bottom-bar .mt-cart-btn:focus,
.mt-bottom-bar .mt-cart-btn--icon:hover,
.mt-bottom-bar .mt-cart-btn--icon:focus {
    background: var(--p2-accent-dark);
    color: #fff !important;
}

.mt-bottom-bar .mt-cart-btn .p2-cart-badge,
.mt-bottom-bar .mt-cart-btn--icon .p2-cart-badge {
    background: #fff;
    color: var(--p2-accent-dark);
    box-shadow: 0 0 0 1.5px #fff;
}

/* Cuộn XUỐNG: ẩn thanh menu dính; cuộn LÊN mới hiện lại (class do shop-p2-ui.js gắn/gỡ, giống TRAVEL/P2 header-pc--hidden). */
#mt-header.is-sticky.is-sticky-hidden .mt-bottom-bar {
    transform: translateY(-100%);
    box-shadow: none;
    pointer-events: none;
}
#mt-header.p2-sticky-noanim .mt-bottom-bar {
    transition: none !important;
}
/* Cột dính (thẻ giá PDP, bộ lọc PLP, sidebar) bám dưới thanh menu: menu hiện = 88px; menu ẩn (cuộn xuống) = sát đỉnh, không chừa khoảng trống. */
:root { --p2-stick-top: 88px; }
body.p2-header-hidden { --p2-stick-top: 16px; }
@media (prefers-reduced-motion: reduce) {
    .p2-pdp-sticky, .p2-plp-sticky, .sidebar-sticky { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    #mt-header.is-sticky .mt-bottom-bar { transition: none; }
}

/* Thanh dưới: logo trái — menu — ô tìm — icon */
.mt-bottom-bar {
    position: relative;
    border-bottom: 1px solid var(--p2-line);
    background: #fff;
}

/* Cuộn xuống: thanh menu bám đỉnh. Spacer = paddingBottom do shop-p2-ui.js (tránh CLS). */
#mt-header.is-sticky .mt-bottom-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 16px rgba(0,0,0,.13);
    /* Trượt mượt khi ẩn/hiện theo hướng cuộn (chỉ transform). Vừa chuyển sang bám đỉnh/F5 thì JS bật .p2-sticky-noanim để không giật. */
    transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease;
    will-change: transform;
}

.mt-bottom-bar .mt-sh-cart {
    order: 5;
    margin-left: 4px;
}

    .mt-bottom-bar .container > .row > [class*="col-"] {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 62px;
    }

/* Thứ tự hiển thị: logo — menu — ô tìm — icon — giỏ hàng (khác thứ tự trong HTML) */
.mt-logo {
    order: 1;
    margin-right: auto;
}

#nav {
    order: 2;
}

.mt-icon-list {
    order: 4;
}

    .mt-logo a,
    .mt-logo .chuhaimau {
        display: inline-flex;
        align-items: center;
        font-weight: 800;
        font-size: 23px;
        line-height: 1.2;
        letter-spacing: .3px;
        text-transform: uppercase;
        color: var(--p2-heading);
        white-space: nowrap;
    }

        .mt-logo a:hover {
            color: var(--p2-accent);
        }

    .mt-logo img {
        display: block;
        width: auto;
        height: 56px;
        max-width: 240px;
        object-fit: contain;
    }

.mt-icon-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mt-icon-list > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        color: #555;
        font-size: 17px;
    }

        .mt-icon-list > li > a:hover {
            background: #f4f4f4;
            color: var(--p2-accent);
        }

.bar-opener {
    flex-direction: column;
}

.bar-opener .bar {
    display: block;
    width: 20px;
    height: 2px;
    margin: 3px 0;
    background: #555;
}

.bar-opener .bar.small {
    width: 14px;
}

.p2-cart-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--p2-hover);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ===================== MENU ===================== */
#nav > ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav > ul > li {
    position: relative;
}

    #nav > ul > li > a {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 12px 10px;
        color: #4a4a4a;
        font-size: 14px;
        font-weight: 600;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }

        #nav > ul > li > a i {
            font-size: 12px;
            line-height: 1;
        }

        #nav > ul > li > a:hover,
        #nav > ul > li:hover > a {
            color: var(--p2-hover);
        }

/* Menu con — hiện khi rê chuột, canh giữa theo mục cha (JS bù lề khi sát mép màn hình) */
#nav .mt-dropmenu,
#nav .s-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding-top: 6px;
}

#nav > ul > li:hover > .mt-dropmenu,
#nav > ul > li:hover > .s-drop,
#nav > ul > li.is-open > .mt-dropmenu,
#nav > ul > li.is-open > .s-drop {
    display: block;
}

#mt-header.p2-mega-lock .mt-bottom-bar,
#mt-header.p2-mega-lock .mt-top-bar,
#mt-header.p2-mega-lock .mt-logo img {
    transition: none !important;
}

#nav .mt-frame {
    /* Số cột do code-behind cân bằng theo chiều cao nhóm */
    --p2-mega-cols: 3;
    box-sizing: border-box;
    width: calc(var(--p2-mega-cols) * 210px + 48px);
    max-width: min(960px, 94vw);
    overflow: visible;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    padding: 16px 18px 14px;
}

#nav .mt-f-box {
    display: grid;
    grid-template-columns: repeat(var(--p2-mega-cols), minmax(0, 1fr));
    gap: 8px 22px;
    align-items: start;
}

#nav .mt-col,
#nav .mt-col-3 {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#nav .sub-dropcont {
    padding: 0;
}

    #nav .sub-dropcont .title {
        display: block;
        margin: 0 0 6px;
        padding-bottom: 6px;
        border-bottom: 1px solid rgba(0, 0, 0, .06);
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.35;
        letter-spacing: .02em;
        text-transform: uppercase;
    }

        #nav .sub-dropcont .title a {
            color: #2f2f2f;
        }

            #nav .sub-dropcont .title a:hover {
                color: var(--p2-hover);
            }

#nav .sub-drop ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#nav .sub-drop a {
    display: block;
    padding: 5px 0;
    color: #6a6a6a;
    font-size: 14px;
    line-height: 1.45;
    border-radius: 4px;
    transition: color .15s ease, background .15s ease;
}

    #nav .sub-drop li > a:hover {
        color: var(--p2-hover);
        background: transparent;
    }

#nav .sub-drop .is-mega-extra,
#nav .s-drop .is-mega-extra {
    display: none;
}

#nav .sub-drop.is-expanded .is-mega-extra,
#nav .s-drop.is-expanded .is-mega-extra {
    display: list-item;
}

#nav .mt-mega-more,
#nav .s-drop > .mt-mega-more {
    /* Nút "Xem thêm" dạng icon (fa-angles-down) — xoay ngược khi đã mở */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    height: 24px;
    margin-top: 6px;
    padding: 0;
    border: 1px solid rgb(228 65 111 / 18%);
    border-radius: 999px;
    background: transparent;
    color: var(--p2-rose, #e4416f);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

#nav .mt-mega-more i {
    display: block;
    pointer-events: none;
    transition: transform .25s ease;
}

#nav .sub-drop.is-expanded > .mt-mega-more i,
#nav .s-drop.is-expanded > .mt-mega-more i {
    transform: rotate(180deg);
}

#nav .s-drop > .mt-mega-more {
    margin: 4px 16px 8px;
}

    #nav .mt-mega-more:hover,
    #nav .mt-mega-more:focus {
        background: var(--p2-rose, #e4416f);
        border-color: var(--p2-rose, #e4416f);
        color: #fff;
        text-decoration: none;
        outline: none;
    }

    #nav .sub-drop.is-expanded > .mt-mega-more,
    #nav .s-drop.is-expanded > .mt-mega-more {
        background: #fff;
        border-color: rgba(0, 0, 0, .14);
        color: #777;
        font-weight: 500;
    }

/* Menu 2 cấp: danh sách dọc gọn, tự co theo tên mục dài nhất */
#nav .s-drop ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: max-content;
    min-width: 220px;
    max-width: min(340px, 90vw);
    max-height: 72vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--p2-line);
    border-radius: 6px;
    box-shadow: 0 10px 26px rgba(0,0,0,.13);
}

#nav .s-drop a {
    display: block;
    padding: 10px 18px;
    color: #555;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 0;
    transition: color .15s ease, background-color .15s ease;
}

    #nav .s-drop a:hover {
        background: var(--p2-accent-soft);
        color: var(--p2-accent);
    }

.mt-mdropover,
.mt-side-over {
    display: none;
}

/* Điện thoại: thu gọn thanh trên, giỏ hàng thành nút tròn đủ lớn để chạm */
@media (max-width: 767.98px) {
    .mt-top-bar {
        padding: 6px 0 15px;
        font-size: 12px;
    }

        .mt-top-bar .tel,
        .mt-top-bar #mail {
            margin-right: 0;
            max-width: 100%;
        }

        .mt-top-bar #mail {
            display: none;
        }

    .mt-logo img {
        height: 38px;
        max-width: 160px;
    }
}

/* Mobile/tablet: giỏ hàng nằm cố định cạnh nút menu, dạng icon tròn có chấm số.
   Trước đây nút nhảy từ thanh hồng xuống thanh trắng khi cuộn, gây giật mắt. */
@media (max-width: 991.98px) {
    .mt-top-bar .mt-sh-cart {
        display: none;
    }

    .mt-top-bar .mt-sh-actions {
        justify-content: center;
        width: 100%;
        padding: 2px 0 0;
        flex-wrap: nowrap;
    }

    .mt-auth-btn {
        min-height: 28px;
        padding: 0 8px;
        font-size: 10.5px;
    }

    .mt-auth-btn--account.is-logged-in {
        max-width: 120px;
    }

    .mt-top-bar .container > .row > [class*="col-"]:first-child {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center;
    }

    .mt-top-bar .container > .row > [class*="col-"]:last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Thứ tự chạm quen tay: logo — giỏ hàng — tìm kiếm — nút menu ngoài cùng phải */
    .mt-bottom-bar .mt-sh-cart {
        order: 4;
        margin-left: 0;
    }

    .mt-icon-list {
        order: 5;
        gap: 2px;
    }

        /* Nút menu nằm ngoài cùng phải cho khớp hướng ngăn trượt mở ra */
        .mt-icon-list > li:first-child {
            order: 2;
        }

        .mt-icon-list > li > a {
            width: 40px;
            height: 40px;
        }

    .mt-bottom-bar .mt-cart-btn,
    .mt-bottom-bar .mt-cart-btn--icon {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
    }

        .mt-bottom-bar .mt-cart-btn > i,
        .mt-bottom-bar .mt-cart-btn--icon > i {
            font-size: 14px;
        }
}

/* Phần đầu ngăn menu và lớp phủ chỉ dùng cho mobile */
.p2-nav-head,
.p2-nav-backdrop,
.p2-nav-toggle {
    display: none;
}

/* Menu trên mobile: ngăn trượt từ phải, phủ mờ nền, mỗi mục đủ lớn để chạm */
@media (max-width: 991.98px) {
    .mt-bottom-bar .container > .row > [class*="col-"] {
        min-height: 56px;
    }

    .p2-nav-backdrop {
        position: fixed;
        inset: 0;
        /* Thấp hơn .mt-bottom-bar khi mở — nếu để 1090 ở đây sẽ đè cả #nav
           vì #nav nằm bên trong .mt-bottom-bar (cùng stacking context cha). */
        z-index: 1;
        display: block;
        background: rgba(24, 12, 18, .5);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s ease;
    }

        .p2-nav-backdrop.is-shown {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

    #nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: block;
        flex: none;
        width: min(84vw, 330px);
        background: #fff;
        box-shadow: -8px 0 26px rgba(0,0,0,.18);
        transform: translateX(100%);
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        transition: transform .28s ease, visibility .28s ease;
    }

        #nav.open {
            transform: none;
            visibility: visible;
            pointer-events: auto;
        }

    .p2-nav-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 10px 12px 18px;
        background: var(--p2-accent);
        color: #fff;
    }

    .p2-nav-title {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .p2-nav-close {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.18);
        color: #fff;
        font-size: 18px;
        line-height: 1;
        cursor: pointer;
    }

        .p2-nav-close:active {
            background: rgba(255,255,255,.32);
        }

    #nav > ul {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

        #nav > ul > li {
            position: relative;
            border-bottom: 1px solid #f1eef0;
        }

            #nav > ul > li > a {
                display: flex;
                align-items: center;
                min-height: 52px;
                padding: 12px 56px 12px 18px;
                font-size: 14px;
                font-weight: 600;
                line-height: 1.35;
            }

                /* Mũi tên trong link chỉ để trang trí ở desktop; mobile dùng nút riêng */
                #nav > ul > li > a > .fa-angle-down {
                    display: none;
                }

    /* Nút mở cấp con tách khỏi link: chạm chữ là vào trang, chạm mũi tên là xổ menu */
    .p2-nav-toggle {
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 52px;
        padding: 0;
        border: 0;
        border-left: 1px solid #f1eef0a1;
        background: transparent;
        color: #9a9297;
        cursor: pointer;
    }

        .p2-nav-toggle:before {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            margin-top: -3px;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(45deg);
            transition: transform .2s ease;
        }

    #nav > ul > li.open > .p2-nav-toggle {
        color: var(--p2-accent);
    }

        #nav > ul > li.open > .p2-nav-toggle:before {
            margin-top: 3px;
            transform: rotate(-135deg);
        }

    #nav .mt-dropmenu,
    #nav .s-drop {
        position: static;
        left: auto;
        margin-left: 0 !important;
        padding: 0;
        transform: none;
        background: #faf8f9;
    }

    #nav .mt-f-box {
        display: block;
    }

    #nav .mt-frame,
    #nav .s-drop ul {
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: none;
        overflow: visible;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #nav .s-drop a {
        padding: 12px 18px 12px 32px;
        border-top: 1px solid #efecee;
        font-size: 13.5px;
    }

    #nav .sub-dropcont {
        padding: 0;
    }

        #nav .sub-dropcont .title {
            margin: 0;
            padding: 0;
            border-bottom: 0;
        }

            #nav .sub-dropcont .title a {
                display: block;
                padding: 12px 18px 12px 32px;
                border-top: 1px solid #efecee;
            }

    #nav .sub-drop {
        padding-left: 0;
    }

        #nav .sub-drop a {
            padding: 10px 18px 10px 46px;
            border-top: 1px solid #f4f2f3;
            font-size: 13px;
        }

    #nav > ul > li:hover > .mt-dropmenu,
    #nav > ul > li:hover > .s-drop {
        display: none;
    }

    #nav > ul > li.open > .mt-dropmenu,
    #nav > ul > li.open > .s-drop {
        display: block;
    }

    /* Khoá cuộn nền khi ngăn menu đang mở */
    body.p2-nav-open {
        overflow: hidden;
    }

        /* Nâng cả header + thanh menu lên trên lớp phủ (backdrop là anh em của
           .mt-bottom-bar, không phải anh em của #nav). */
        body.p2-nav-open #mt-header {
            position: relative;
            z-index: 1200;
        }

        body.p2-nav-open .mt-bottom-bar {
            position: relative;
            z-index: 2;
        }

        /* Các widget nổi dùng z-index rất cao nên phải tạm ẩn, nếu không chúng
           vẫn nằm đè lên lớp phủ và người dùng bấm nhầm khi menu đang mở. */
        body.p2-nav-open .OLA_float_bar,
        body.p2-nav-open .ola-sw,
        body.p2-nav-open .ep-root {
            visibility: hidden;
        }
}

/* ===================== Ô TÌM KIẾM ===================== */
.p2-search {
    order: 3;
    position: relative;
    flex: 0 0 auto;
}

.p2-search__box {
    display: flex;
    align-items: stretch;
    width: 236px;
    height: 36px;
    border: 1px solid #e6e0e3;
    border-radius: 50px;
    background: #f6f4f5;
    overflow: hidden;
    transition: width .25s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

    .p2-search__box:hover,
    .p2-search__box:focus-within {
        /* KHÔNG đổi width khi rê chuột / bấm vào: ô tìm nằm cùng hàng với menu (flex), nở thêm sẽ ép menu và làm mục cuối (BLOG) rớt xuống hàng 2 */
        border-color: var(--p2-accent);
        background: #fff;
        box-shadow: 0 0 0 2px rgba(234,69,117,.12);
    }

.p2-search__icon {
    display: flex;
    align-items: center;
    padding-left: 13px;
    color: #9b9098;
    font-size: 13px;
}

.p2-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 6px 0 16px;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #33272d;
}

    .p2-search__input::placeholder {
        color: #a79ba2;
    }

.p2-search__clear {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #a79ba2;
    font-size: 13px;
    cursor: pointer;
}

.p2-search__box.has-text .p2-search__clear {
    display: flex;
}

.p2-search__clear:hover {
    color: var(--p2-accent);
}

.p2-search__go {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    padding: 0;
    border: 0;
    border-left: 1px solid #e6e0e3;
    background: transparent;
    color: #6b5f66;
    font-size: 13px;
    cursor: pointer;
    transition: color .2s ease, background .2s ease;
}

    .p2-search__go:hover {
        background: var(--p2-accent-soft);
        color: var(--p2-accent);
    }

/* Bảng gợi ý nhanh */
.p2-search__panel {
    display: none;
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: 350;
    width: min(430px, 92vw);
    max-height: 68vh;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--p2-line);
    border-radius: 10px;
    box-shadow: 0 18px 42px rgba(0,0,0,.17);
}

    .p2-search__panel.is-shown {
        display: block;
    }

.p2-ts-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 13px;
    border-bottom: 1px solid #f4f0f2;
    color: #3c3339;
}

    .p2-ts-item:last-child {
        border-bottom: 0;
    }

    .p2-ts-item:hover,
    .p2-ts-item.active {
        background: var(--p2-accent-soft);
        color: #3c3339;
    }

.p2-ts-item__img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--p2-line);
    border-radius: 6px;
}

.p2-ts-item__body {
    min-width: 0;
    flex: 1 1 auto;
}

.p2-ts-item__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

.p2-ts-item__price {
    margin-top: 3px;
    color: var(--p2-accent);
    font-size: 13px;
    font-weight: 700;
}

    .p2-ts-item__price del {
        margin-left: 6px;
        color: #a0989c;
        font-size: 12px;
        font-weight: 400;
    }

.p2-ts-all {
    display: block;
    position: sticky;
    bottom: 0;
    padding: 10px 13px;
    border-top: 1px solid var(--p2-line);
    background: #faf7f8;
    color: var(--p2-accent-dark);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}

    .p2-ts-all:hover {
        background: var(--p2-accent-soft);
        color: var(--p2-accent-dark);
    }

.p2-ts-empty,
.p2-ts-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 13px;
    color: #8d8388;
    font-size: 13px;
}

/* Dưới 1200px: ô tìm thu về nút kính lúp, bấm mới xổ ra dưới thanh menu */
@media (max-width: 1199.98px) {
    .p2-search {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 340;
        padding: 11px 12px;
        background: #fff;
        border-top: 1px solid var(--p2-line);
        box-shadow: 0 14px 24px rgba(0,0,0,.09);
    }

        .p2-search.is-open {
            display: block;
        }

    .p2-search__box,
    .p2-search__box:hover,
    .p2-search__box:focus-within {
        width: 100%;
        height: 40px;
    }

    .p2-search__panel {
        position: static;
        width: auto;
        margin-top: 9px;
        max-height: 60vh;
        box-shadow: none;
    }
}

@media (min-width: 1200px) {
    .p2-search-toggle-item {
        display: none;
    }

    /* Sticky: icon tròn; chỉ bung khi .is-expanded (mở bằng click) */
    #mt-header.is-sticky .p2-search,
    #mt-header.is-sticky .mt-bottom-bar .mt-sh-cart {
        display: flex;
        align-items: center;
        align-self: center;
    }

    #mt-header.is-sticky .p2-search__box {
        width: 34px;
        height: 34px;
        min-height: 34px;
        justify-content: center;
        border: 1px solid var(--p2-line);
        border-radius: 50%;
        background: #f6f4f5;
        box-shadow: none;
        overflow: hidden;
        /* Không animate width circle↔pill (nhìn chậm/méo); mở/đóng tức thì */
        transition: none;
    }

    #mt-header.is-sticky .p2-search.is-expanded .p2-search__box {
        width: 236px;
        border-radius: 50px;
        border-color: var(--p2-line);
        background: #f6f4f5;
        transition: none;
    }

    #mt-header.is-sticky .p2-search__input {
        flex: 0 0 0;
        width: 0;
        min-width: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
        transition: none;
    }

    #mt-header.is-sticky .p2-search.is-expanded .p2-search__input {
        flex: 1 1 auto;
        width: auto;
        padding: 0 6px 0 14px;
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    #mt-header.is-sticky .p2-search__clear {
        display: none !important;
    }

    #mt-header.is-sticky .p2-search.is-expanded .p2-search__box.has-text .p2-search__clear {
        display: flex !important;
    }

    #mt-header.is-sticky .p2-search__go {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-left: 0;
        border-radius: 50%;
        background: transparent;
        color: #6b5f66;
        font-size: 14px;
        transition: none;
    }

    #mt-header.is-sticky .p2-search.is-expanded .p2-search__go {
        border-left: 1px solid #e6e0e3;
        border-radius: 0;
        color: #6b5f66;
    }

        #mt-header.is-sticky .p2-search.is-expanded .p2-search__box:focus-within {
            border-color: var(--p2-accent);
            background: #fff;
        }
}

/* ===================== BANNER TRANG CHỦ ===================== */
.banner-slider-new {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
}

    .banner-slider-new .slides {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .banner-slider-new .slide {
        position: absolute;
        inset: 0;
        display: block;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transform: scale(1.04);
        transition: opacity .8s ease, transform .8s ease;
        text-decoration: none;
        color: inherit;
        cursor: default;
    }

        .banner-slider-new a.slide {
            cursor: pointer;
        }

        .banner-slider-new .slide picture {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .banner-slider-new .slide img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            border: 0;
        }

        .banner-slider-new .slide.active {
            opacity: 1;
            transform: scale(1);
            z-index: 2;
        }

    .banner-slider-new .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(0,0,0,.32);
        color: #fff;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        user-select: none;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease, background .3s ease;
        z-index: 10;
    }

        .banner-slider-new .nav-btn i {
            display: block;
            line-height: 1;
            pointer-events: none;
        }

    .banner-slider-new:hover .nav-btn {
        opacity: 1;
        pointer-events: auto;
    }

    .banner-slider-new .nav-btn:hover {
        background: rgba(0,0,0,.6);
    }

    .banner-slider-new .prev {
        left: 18px;
    }

    .banner-slider-new .next {
        right: 18px;
    }

    .banner-slider-new .dots {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 9px;
        z-index: 3;
    }

        .banner-slider-new .dots span {
            width: 11px;
            height: 11px;
            border: 2px solid transparent;
            border-radius: 50%;
            background: rgba(255,255,255,.6);
            cursor: pointer;
        }

            .banner-slider-new .dots span.active {
                background: var(--p2-accent);
                border-color: #fff;
            }

/* Ảnh banner thường là khổ rất ngang (2000x650). Nếu ép chiều cao cố định trên
   máy hẹp thì cover cắt mất hai bên, chữ trong ảnh bị mất. Giữ đúng tỉ lệ ảnh. */
@media (max-width: 992px) {
    .banner-slider-new {
        height: auto;
        min-height: 180px;
        aspect-ratio: 2000 / 650;
    }
}

@media (max-width: 576px) {
    .banner-slider-new {
        min-height: 0;
    }

        .banner-slider-new .nav-btn {
            width: 34px;
            height: 34px;
            font-size: 15px;
            opacity: 1;
            pointer-events: auto;
        }

        .banner-slider-new .prev {
            left: 10px;
        }

        .banner-slider-new .next {
            right: 10px;
        }

        .banner-slider-new .dots {
            bottom: 8px;
        }

            .banner-slider-new .dots span {
                width: 8px;
                height: 8px;
            }
}

/* ===================== KHỐI GIỚI THIỆU (ảnh + nội dung) ===================== */
.p2-intro {
    padding: 38px 0 10px;
}

    .p2-intro + .p2-intro {
        padding-top: 12px;
    }

.p2-intro__row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 40px;
    align-items: center;
}

.p2-intro.is-reverse .p2-intro__row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

    .p2-intro.is-reverse .p2-intro__media {
        order: 2;
    }

.p2-intro__media {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #f2eef0;
    box-shadow: 0 12px 30px rgba(76, 20, 45, .10);
    aspect-ratio: 4 / 3;
}

    .p2-intro__media.is-video {
        aspect-ratio: 16 / 9;
    }

    .p2-intro__media img,
    .p2-intro__media iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        object-fit: cover;
        display: block;
    }

.p2-intro__body {
    padding: 4px 0;
}

.p2-intro__eyebrow {
    display: block;
    margin-bottom: 10px;
    color: var(--p2-accent);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.p2-intro__title {
    margin: 0 0 14px;
    color: var(--p2-heading);
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
}

.p2-intro__desc {
    margin: 0 0 22px;
    color: var(--p2-text);
    font-size: 15px;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.p2-intro__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 26px;
    border-radius: 999px;
    background: var(--p2-accent);
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s linear, transform .2s linear;
}

    .p2-intro__btn:hover {
        background: var(--p2-accent-dark);
        transform: translateY(-2px);
    }

    .p2-intro__btn i {
        font-size: 12px;
    }

@media (max-width: 991.98px) {
    .p2-intro {
        padding: 26px 0 6px;
    }

    .p2-intro__row,
    .p2-intro.is-reverse .p2-intro__row {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .p2-intro.is-reverse .p2-intro__media {
        order: 0;
    }

    .p2-intro__media {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 575.98px) {
    .p2-intro__desc {
        -webkit-line-clamp: 4;
        font-size: 14.5px;
    }
}

/* ===================== LỰA CHỌN HÀNG ĐẦU — lối tắt cuộn ngang ===================== */
.p2-hcards {
    padding: 20px 0 20px;
}

.p2-hcards__wrap {
    position: relative;
    /* Giống home-hero: không chừa mép — nút nằm trên thẻ */
    padding: 0;
}

.p2-hcards__viewport {
    overflow: hidden;
    width: 100%;
}

.p2-hcards__track {
    display: flex;
    gap: 12px;
    transition: transform .4s ease;
    transform: translateZ(0);
}

.p2-hcard {
    /* Desktop: 5 thẻ + 4 gap 12px */
    flex: 0 0 calc((100% - 48px) / 5);
    max-width: calc((100% - 48px) / 5);
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 10px 14px 10px 10px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--p2-heading, #222);
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

a.p2-hcard:hover {
    /* không dịch chuyển thẻ khi hover: thẻ nhích 2px dưới con trỏ có thể làm mousedown/mouseup lệch phần tử → click hụt */
    box-shadow: 0 6px 16px rgba(228, 65, 111, .12);
    color: var(--p2-heading, #222);
}

.p2-hcard:nth-child(5n + 1) { background: #fdeef3; }
.p2-hcard:nth-child(5n + 2) { background: #f1eef8; }
.p2-hcard:nth-child(5n + 3) { background: #eef8f3; }
.p2-hcard:nth-child(5n + 4) { background: #fff3eb; }
.p2-hcard:nth-child(5n + 5) { background: #eef6fb; }

.p2-hcard__media {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .72);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .p2-hcard__media img {
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        object-position: center;
        border: 0;
    }

.p2-hcard__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Nguồn Pages — tham khảo SHOP P1 .cat-item: ảnh full, chữ overlay, không nền pastel */
.p2-hcards--pages .p2-hcards__wrap {
    /* Giống home-hero: không chừa mép — nút nằm trên ảnh */
    padding-left: 0;
    padding-right: 0;
}

.p2-hcards--pages .p2-hcards__track {
    gap: 14px;
    align-items: stretch;
}

.p2-hcards--pages .p2-hcard,
.p2-hcards--pages .p2-hcard--page,
.p2-hcards--pages .p2-hcard:nth-child(5n + 1),
.p2-hcards--pages .p2-hcard:nth-child(5n + 2),
.p2-hcards--pages .p2-hcard:nth-child(5n + 3),
.p2-hcards--pages .p2-hcard:nth-child(5n + 4),
.p2-hcards--pages .p2-hcard:nth-child(5n + 5) {
    flex: 0 0 calc((100% - 56px) / 5);
    max-width: calc((100% - 56px) / 5);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    padding: 0;
    border-radius: 8px;
    background: transparent !important;
    box-shadow: none;
    overflow: hidden;
    position: relative;
}

.p2-hcards--pages a.p2-hcard:hover,
.p2-hcards--pages a.p2-hcard--page:hover {
    transform: none;
    box-shadow: none;
    color: #fff;
}

.p2-hcards--pages .p2-hcard__media {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    border-radius: 0;
    background: #ececec;
    overflow: hidden;
}

.p2-hcards--pages .p2-hcard__media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
    transition: transform .5s ease, filter .5s ease;
}

.p2-hcards--pages a.p2-hcard:hover .p2-hcard__media img,
.p2-hcards--pages a.p2-hcard--page:hover .p2-hcard__media img {
    transform: scale(1.08);
    filter: brightness(0.72);
}

.p2-hcards--pages .p2-hcard__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    flex: 0 0 auto;
    margin: 0;
    padding: 28px 14px 14px;
    text-align: left;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .88), transparent);
    pointer-events: none;
    -webkit-line-clamp: 2;
}

/* Categories + Pages: nút ❮❯ nhỏ, style cũ — vẫn overlay trên thẻ (không chừa mép) */
.p2-hcards__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #d5d5d5;
    background: #fff;
    color: #a8a8a8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    line-height: 1;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}

    .p2-hcards__nav:hover {
        background: #fff;
        border-color: var(--p2-accent, #e4416f);
        color: var(--p2-accent, #e4416f);
    }

    .p2-hcards__nav:disabled {
        opacity: .35;
        cursor: default;
        pointer-events: none;
    }

    .p2-hcards__nav.prev { left: -8px; }
    .p2-hcards__nav.next { right: -8px; }

    .p2-hcards__nav i {
        pointer-events: none;
        line-height: 1;
        font-size: 11px;
    }

@media (max-width: 991.98px) {
    .p2-hcards__nav.prev { left: 4px; }
    .p2-hcards__nav.next { right: 4px; }
}

@media (max-width: 1199.98px) {
    .p2-hcard {
        flex-basis: calc((100% - 24px) / 3);
        max-width: calc((100% - 24px) / 3);
    }

    .p2-hcards--pages .p2-hcard,
    .p2-hcards--pages .p2-hcard--page,
    .p2-hcards--pages .p2-hcard:nth-child(n) {
        flex-basis: calc((100% - 42px) / 4);
        max-width: calc((100% - 42px) / 4);
        background: transparent !important;
    }
}

@media (max-width: 767.98px) {
    .p2-hcards__wrap {
        padding: 0;
    }

    .p2-hcards--pages .p2-hcards__wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .p2-hcard {
        flex-basis: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
        min-height: 64px;
        padding: 8px 10px 8px 8px;
        gap: 10px;
        border-radius: 12px;
    }

    .p2-hcard__media {
        flex-basis: 44px;
        width: 44px;
        height: 44px;
        border-radius: 10px;
    }

    .p2-hcard__label {
        font-size: 13px;
    }

    .p2-hcards--pages .p2-hcard,
    .p2-hcards--pages .p2-hcard--page,
    .p2-hcards--pages .p2-hcard:nth-child(n) {
        flex-basis: calc((100% - 12px) / 2);
        max-width: calc((100% - 12px) / 2);
        min-height: 0;
        padding: 0;
        gap: 0;
        background: transparent !important;
    }

    .p2-hcards--pages .p2-hcard__media {
        flex-basis: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        border-radius: 0;
    }

    .p2-hcards--pages .p2-hcard__label {
        font-size: 12px;
        padding: 22px 12px 12px;
    }

    .p2-hcards__nav {
        width: 26px;
        height: 26px;
        font-size: 10px;
    }

        .p2-hcards__nav i {
            font-size: 10px;
        }

    .p2-hcards__nav.prev { left: 4px; }
    .p2-hcards__nav.next { right: 4px; }
}

@media (max-width: 419.98px) {
    .p2-hcard {
        flex-basis: 78%;
        max-width: 78%;
    }

    .p2-hcards--pages .p2-hcard,
    .p2-hcards--pages .p2-hcard--page {
        flex-basis: 72%;
        max-width: 72%;
    }
}

/* ===================== KHỐI SẢN PHẨM TRANG CHỦ ===================== */
.mt-bestseller {
    position: relative;
    padding: 36px 0 20px;
}

.mt-bestseller.p2-ftabs {
    padding-top: 36px;
}

.bg-grey {
    background: #f7f7f5;
}

.mt-bestseller .mt-heading .heading {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--p2-heading);
}

/* Khối tab gộp 3 cờ sản phẩm: thanh chọn dạng viên thuốc, mỗi lần chỉ hiện 1 hàng
   sản phẩm nên tiết kiệm được chiều cao so với 3 khối rời trước đây. */
.p2-ftabs__nav {
    display: inline-flex;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 5px;
    border-radius: 999px;
    background: #eceef3;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .p2-ftabs__nav::-webkit-scrollbar {
        display: none;
    }

.p2-ftabs__pill {
    flex: 0 0 auto;
    border: 0;
    padding: 10px 26px;
    border-radius: 999px;
    background: transparent;
    color: #7b8494;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}

    .p2-ftabs__pill:hover {
        color: #ea4575;
    }

    .p2-ftabs__pill.is-active {
        background: #fff;
        color: #ea4575;
        box-shadow: 0 4px 12px rgba(23, 32, 51, .12);
    }

    .p2-ftabs__pill:focus-visible {
        outline: 2px solid #ea4575;
        outline-offset: 2px;
    }

.p2-ftabs__pane {
    display: none;
}

    .p2-ftabs__pane.is-active {
        display: block;
    }

/* Màn hẹp: giữ một hàng và cho cuộn ngang. Xếp pill xuống dòng sẽ cao hơn cả
   phần chiều cao vừa tiết kiệm được, nên chỉ làm mờ mép phải để báo còn tab. */
@media (max-width: 767.98px) {
    /* Điện thoại: ba nút chia đều bề ngang, chữ tự xuống dòng. Trước đây thanh
       này phải cuộn ngang nên tab thứ ba luôn bị cắt mất một nửa. */
    .p2-ftabs__nav {
        display: flex;
        width: 100%;
        margin-bottom: 16px;
        padding: 4px;
        border-radius: 16px;
        overflow: visible;
    }

    .p2-ftabs__pill {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 6px;
        border-radius: 13px;
        font-size: 11px;
        letter-spacing: 0;
        line-height: 1.3;
        white-space: normal;
    }
}

.mt-producttabs {
    position: relative;
    padding: 26px 0 10px;
    content-visibility: auto;
    contain-intrinsic-size: auto 420px;
}

    .mt-producttabs .producttabs {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
        list-style: none;
        margin: 0 0 18px;
        padding: 0;
        text-align: left;
    }

        .mt-producttabs .producttabs a {
            display: inline-block;
            color: var(--p2-heading);
            font-size: 17px;
            font-weight: 700;
            text-transform: uppercase;
        }

            .mt-producttabs .producttabs a:hover,
            .mt-producttabs .producttabs a.active:hover {
                color: var(--p2-hover);
            }

/* Bù lại khoảng đệm của từng ô để mép thẻ trùng đúng mép nội dung của container */
.bestseller-slider,
.tabs-slider {
    margin-right: -8px;
    margin-left: -8px;
}

    .bestseller-slider .slide,
    .tabs-slider .slide {
        padding: 0 8px;
    }

/* Trước khi Slick chạy: giữ đúng số cột, ẩn phần dư — tránh xếp dọc rồi nhảy ngang. */
.bestseller-slider:not(.slick-initialized),
.tabs-slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}

    .bestseller-slider:not(.slick-initialized) .slide,
    .tabs-slider:not(.slick-initialized) .slide {
        flex: 0 0 25%;
        max-width: 25%;
        box-sizing: border-box;
    }

@media (max-width: 991.98px) {
    .bestseller-slider:not(.slick-initialized) .slide,
    .tabs-slider:not(.slick-initialized) .slide {
        flex-basis: 33.333%;
        max-width: 33.333%;
    }
}

@media (max-width: 767.98px) {
    .bestseller-slider:not(.slick-initialized) .slide,
    .tabs-slider:not(.slick-initialized) .slide {
        flex-basis: 50%;
        max-width: 50%;
    }
}

/* Nút chuyển của slider — hình tròn, mũi tên luôn nằm giữa */
.slick-prev,
.slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid #d5d5d5;
    border-radius: 50%;
    background: #fff;
    color: #a8a8a8;
    font-size: 0;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
    z-index: 5;
}

    .slick-prev:hover,
    .slick-next:hover {
        border-color: var(--p2-accent);
        color: var(--p2-accent);
    }

    .slick-prev:before,
    .slick-next:before {
        content: "";
        display: block;
        width: 9px;
        height: 9px;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
    }

    .slick-prev:before {
        transform: rotate(-135deg);
        margin-left: 3px;
    }

    .slick-next:before {
        transform: rotate(45deg);
        margin-right: 3px;
    }

/* Khối theo cờ: nút lớn hai bên, canh giữa theo ảnh sản phẩm chứ không phải
   giữa cả thẻ (JS đặt biến --p2-arrow-y), nếu thiếu biến thì lùi về 50%. */
.mt-bestseller .slick-prev,
.mt-bestseller .slick-next {
    top: var(--p2-arrow-y, 50%);
    width: 44px;
    height: 44px;
}

.mt-bestseller .slick-prev {
    left: -54px;
}

.mt-bestseller .slick-next {
    right: -54px;
}

/* Khối theo danh mục: nút nhỏ góc phải trên, canh đúng mép nội dung */
.mt-producttabs .slick-prev,
.mt-producttabs .slick-next {
    top: -48px;
    transform: none;
    width: 34px;
    height: 34px;
}

.mt-producttabs .slick-prev {
    left: auto;
    right: 50px;
}

.mt-producttabs .slick-next {
    right: 8px;
}

/* Hẹp hơn 1350px thì không còn chỗ đặt nút ngoài lưới: đưa vào trong, nền trắng
   mờ để vẫn đọc được ảnh bên dưới và không lệch khỏi mép thẻ. */
@media (max-width: 1349.98px) {
    .mt-bestseller .slick-prev,
    .mt-bestseller .slick-next {
        background: rgba(255,255,255,.94);
        border-color: rgba(0,0,0,.06);
        box-shadow: 0 3px 12px rgba(0,0,0,.16);
    }

    .mt-bestseller .slick-prev {
        left: 10px;
    }

    .mt-bestseller .slick-next {
        right: 10px;
    }
}

/* Điện thoại: một thang padding dọc chung cho mọi khối để nhịp trang đều nhau,
   và nút chuyển slider đủ lớn để chạm. */
@media (max-width: 767.98px) {
    .p2-intro {
        padding: 20px 0 4px;
    }

    .p2-hcards {
        padding: 20px 0 24px;
    }

    .mt-bestseller {
        padding: 28px 0 14px;
    }

    .mt-bestseller.p2-ftabs {
        padding-top: 28px;
    }

    .mt-producttabs {
        padding: 18px 0 6px;
    }

    .mt-bestseller .slick-prev,
    .mt-bestseller .slick-next {
        width: 40px;
        height: 40px;
    }

    .mt-producttabs .slick-prev,
    .mt-producttabs .slick-next {
        top: -44px;
        width: 32px;
        height: 32px;
    }

    .mt-producttabs .slick-prev {
        right: 46px;
    }
}

/* Thẻ sản phẩm — bổ sung cho phần đã có trong shop-p2-theme.css */
.mt-product1 .b2,
.mt-product1 .b3 {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f4f4f4;
}

    .mt-product1 .b2 img,
    .mt-product1 .b3 img {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        display: block;
    }

.mt-product1 .txt {
    text-align: center;
}

/* Giới hạn 2 dòng để mọi thẻ cùng chiều cao, giá nằm thẳng hàng nhau */
.mt-product1 .title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 38px;
    font-size: 13px;
    line-height: 19px;
    font-weight: 600;
}

.mt-product1 .price {
    color: var(--p2-accent);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.mt-product1 del.off {
    margin-left: 6px;
    color: #9a9a9a;
    font-size: 13px;
    font-weight: 400;
}

.mt-product1 .caption,
.mt-product1 .caption .off {
    background: var(--p2-hover);
    color: #fff;
}

.p2-outstock-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 4;
    padding: 2px 8px;
    border-radius: 3px;
    background: #6c757d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

/* ===================== FOOTER ===================== */
#mt-footer {
    position: relative;
    margin-top: 26px;
    margin-bottom: 0;
    overflow: hidden;
    border: 0;
    outline: 0;
    box-shadow: none;
    background: linear-gradient(165deg, #ff278e 0%, var(--p2-footer-bg) 45%, #f80f87 100%);
}

    /* Che khe anti-alias 1px (vạch xám/đen) ngay mép nối thân trang → sóng */
    #mt-footer:before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 3;
        height: 2px;
        background: #fff;
        pointer-events: none;
    }

/* Dải sóng nối thân trang xuống footer, hai lớp trôi ngược chiều cho mềm mắt */
.p2-footer-wave {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-top: -2px;
    line-height: 0;
    transform: scaleY(-1);
}

.p2-footer-wave-base {
    display: block;
    width: 100%;
    height: clamp(42px, 5.5vw, 70px);
    vertical-align: bottom;
}

    .p2-footer-wave-base path {
        fill: #fff;
        shape-rendering: geometricPrecision;
    }

.p2-footer-wave-anim {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(42px, 5.5vw, 70px);
    overflow: hidden;
    pointer-events: none;
}

    .p2-footer-wave-anim svg {
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 200%;
        height: 100%;
        animation: p2FooterWaveDrift 16s linear infinite;
    }

.p2-footer-wave-anim--2 svg {
    animation: p2FooterWaveDrift 24s linear infinite reverse;
}

@keyframes p2FooterWaveDrift {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .p2-footer-wave-anim svg {
        animation: none !important;
    }
}

.footer-holder {
    position: relative;
    z-index: 1;
    background: transparent;
    color: #fff;
    padding: 12px 0 0px;
}

    .footer-holder a {
        color: #fff;
        text-decoration: none !important;
    }

        .footer-holder a:hover,
        .footer-holder a:focus {
            color: #fff;
            text-decoration: none !important;
        }

.footer-holder .f-widget-heading {
    display: block;
    margin: 0 0 14px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    overflow: visible;
    white-space: normal;
}
.footer-holder .f-widget-heading--brand {
    font-size: 20px;
    letter-spacing: 0.4px;
    line-height: 1.25;
    word-break: break-word;
}

/* Cột phải: MXH + QR căn giữa, QR ~90% ngang hàng icon */
.footer-holder .p2-footer-col-connect .f-widget-connect {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Cột footer: 5 + 5 + 2 (công ty | thông tin+NH | MXH+QR) */
@media (min-width: 576px) {
    .footer-holder .p2-footer-main--no-map .p2-footer-col-company {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .footer-holder .p2-footer-main--no-map .p2-footer-col-info {
        flex: 0 0 41.666667%;
        max-width: 41.666667%;
    }
    .footer-holder .p2-footer-main--no-map .p2-footer-col-connect {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }
}

/* BANK_INFO — cùng kiểu heading + list chấm như cột Thông tin */
.footer-holder .f-widget-info .p2-footer-bank-heading {
    margin-top: 18px;
    margin-bottom: 8px;
}
.footer-holder .f-widget-info .p2-footer-bank-nav {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
.footer-holder .f-widget-info .p2-footer-bank-line {
    display: block;
    color: rgba(255, 255, 255, 0.94);
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
}
.footer-holder .f-widget-info .p2-footer-bank-line__k {
    font-weight: 600;
    margin-right: 4px;
}
.footer-holder .f-widget-info .p2-footer-bank-line__strong {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Thông tin 2 cột link; bank heading+list full width dưới cùng */
.footer-holder .f-widget-info--split {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
    column-gap: 10px;
    align-items: start;
}
.footer-holder .f-widget-info--split > .f-widget-heading:not(.p2-footer-bank-heading) {
    grid-column: 1 / -1;
}
.footer-holder .f-widget-info--split .p2-footer-info-cols {
    display: contents;
}
.footer-holder .f-widget-info--split .p2-footer-info-cols__col:first-child {
    grid-column: 1;
    grid-row: 2;
}
.footer-holder .f-widget-info--split .p2-footer-info-cols__col:last-child {
    grid-column: 2;
    grid-row: 2;
}
.footer-holder .f-widget-info--split > .p2-footer-bank-heading {
    grid-column: 1 / -1;
    grid-row: 3;
}
.footer-holder .f-widget-info--split > .p2-footer-bank-nav {
    grid-column: 1 / -1;
    grid-row: 4;
}

/* Liên hệ công ty — icon tròn nhỏ, căn hàng với chữ */
.footer-holder .p2-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 9px;
    color: #fff;
    font-size: 13.5px;
    line-height: 1.4;
    max-width: 100%;
}
.footer-holder .p2-footer-contact li > span:last-child,
.footer-holder .p2-footer-contact address {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding-top: 0;
    line-height: 20px;
}
.footer-holder .p2-footer-contact address {
    display: block;
    margin: 0;
    font-style: normal;
}
.footer-holder .p2-footer-contact a {
    color: #fff;
    text-decoration: none !important;
    font-weight: 400;
    transition: font-weight 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.footer-holder .p2-footer-contact a:hover,
.footer-holder .p2-footer-contact a:focus {
    color: #fff;
    font-weight: 700;
    text-decoration: none !important;
}
.footer-holder .p2-footer-contact__sep {
    margin: 0 3px;
    opacity: 0.65;
    line-height: 20px;
}
.footer-holder .p2-footer-contact__ico {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
    color: #fff;
    margin-top: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.footer-holder .p2-footer-contact__ico i {
    margin: 0 !important;
    line-height: 1;
}
.footer-holder .p2-footer-contact__ico--map { background: #f59e0b; }
.footer-holder .p2-footer-contact__ico--phone { background: #22c55e; }
.footer-holder .p2-footer-contact__ico--mail { background: #38bdf8; }
.footer-holder .p2-footer-contact__ico--web { background: #a78bfa; }
.footer-holder .p2-footer-contact__ico--branch { background: #fb7185; }
.footer-holder .p2-footer-contact__ico--tax { background: #fbbf24; }
.footer-holder .p2-footer-contact__ico--license { background: #34d399; }
.footer-holder .p2-footer-contact__ico--bank { background: #60a5fa; }

/* SĐT + website nổi bật */
.footer-holder .p2-footer-contact__phones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    line-height: 20px;
}
.footer-holder .p2-footer-contact__chip {
    display: inline-block;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 2px 9px;
    border-radius: 999px;
    text-decoration: none !important;
    vertical-align: middle;
}
.footer-holder .p2-footer-contact__chip--phone {
    color: #fff !important;
    background: rgba(34, 197, 94, 0.28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.footer-holder .p2-footer-contact__chip--web {
    color: #fff !important;
    background: rgba(167, 139, 250, 0.32);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.footer-holder .p2-footer-contact__chip:hover,
.footer-holder .p2-footer-contact__chip:focus {
    font-weight: 800;
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.22);
}

.footer-holder .p2-footer-contact__html {
    display: block;
    color: rgba(255, 255, 255, 0.96);
    word-break: break-word;
    line-height: 1.4;
}
.footer-holder .p2-footer-contact__html p,
.footer-holder .p2-footer-contact__html div {
    margin: 0 0 4px;
    line-height: 1.4;
}
.footer-holder .p2-footer-contact__html p:last-child,
.footer-holder .p2-footer-contact__html div:last-child {
    margin-bottom: 0;
}
.footer-holder .p2-footer-contact__html a {
    color: #fff;
    text-decoration: none !important;
}
.footer-holder .p2-footer-contact__html a:hover,
.footer-holder .p2-footer-contact__html a:focus {
    font-weight: 700;
    text-decoration: none !important;
}
.footer-holder .p2-footer-contact__html img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.footer-holder .p2-footer-contact__branch-label {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
    line-height: 20px;
}
.footer-holder .p2-footer-contact__branch .p2-footer-contact__html > p:first-child,
.footer-holder .p2-footer-contact__branch .p2-footer-contact__html > div:first-child {
    margin-top: 0;
}

/* Chống chữ cột Thông tin tràn sang Kết nối (khi không map / có QR) */
.footer-holder .row > [class*="col-"] {
    min-width: 0;
}
.footer-holder .f-widget-info,
.footer-holder .f-widget-connect {
    max-width: 100%;
    overflow: visible;
}
.footer-holder .f-widget-info .p2-footer-info-cols {
    overflow: hidden;
    max-width: 100%;
}

/* Thông tin — 2 cột gọn trong cột Bootstrap */
.footer-holder .p2-footer-info-cols {
    display: block;
    max-width: 100%;
}
/* Split: contents để bank nằm dưới cột link trái (grid cha) */
.footer-holder .f-widget-info--split .p2-footer-info-cols {
    display: contents;
}
.footer-holder .f-widget-info--split .p2-footer-info-cols__col {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}
.footer-holder .f-widget-info .f-widget-nav li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 0 8px;
    padding: 0 0 0 14px;
    line-height: 1.4;
    max-width: 100%;
}
.footer-holder .f-widget-info .f-widget-nav li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.footer-holder .f-widget-info .f-widget-nav a {
    display: block;
    color: rgba(255, 255, 255, 0.94);
    text-decoration: none !important;
    font-size: 13.5px;
    font-weight: 400;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    transition: color 0.15s ease, font-weight 0.15s ease;
}
.footer-holder .f-widget-info .f-widget-nav a:hover,
.footer-holder .f-widget-info .f-widget-nav a:focus {
    color: #fff;
    font-weight: 700;
    text-decoration: none !important;
}
.footer-holder .f-widget-info .f-widget-nav li:hover::before {
    background: #fff;
}

/* QR cột phải — nền trắng + padding vừa, rộng ~90% hàng icon, căn giữa */
.footer-holder .p2-footer-col-connect .p2-footer-qr {
    width: 90%;
    max-width: 90%;
    margin: 8px auto 0;
    display: flex;
    justify-content: center;
}
.footer-holder .p2-footer-col-connect .p2-footer-qr__link {
    display: block;
      
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 15px;
    margin: 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    line-height: 0;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.footer-holder .p2-footer-col-connect .p2-footer-qr__link svg,
.footer-holder .p2-footer-col-connect .p2-footer-qr__link img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    object-fit: contain !important;
    background: #fff;
}

/* Footer social icons — mỗi mạng 1 kiểu */
.footer-holder .p2-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 4px;
}
.footer-holder .p2-footer-social__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 15px;
    line-height: 1;
    opacity: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, filter 0.2s ease;
}
.footer-holder .p2-footer-social__btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    color: #fff !important;
    opacity: 1 !important;
}
.footer-holder .p2-footer-social__label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}
.footer-holder .p2-footer-social__label--oa {
    font-size: 10px;
}
.footer-holder .p2-footer-social__btn--facebook { background: #1877f2; }
.footer-holder .p2-footer-social__btn--fanpage { background: #0866ff; }
.footer-holder .p2-footer-social__btn--zalo { background: #0068ff; }
.footer-holder .p2-footer-social__btn--zalo-oa { background: #004bb5; }
.footer-holder .p2-footer-social__btn--youtube { background: #ff0000; }
.footer-holder .p2-footer-social__btn--tiktok { background: #010101; }
.footer-holder .p2-footer-social__btn--instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.footer-holder .p2-footer-social__btn--other { background: #64748b; }

/* Footer QR (map đã tắt ở Master — không còn CSS iframe map) */
.footer-holder .p2-footer-qr {
    margin-top: 4px;
}
.footer-holder .p2-footer-qr__link {
    display: inline-block;
    width: 168px;
    height: 168px;
    padding: 8px;
    background: #fff;
    border-radius: 12px;
    transition: transform 0.25s ease;
}
.footer-holder .p2-footer-qr__link:hover {
    transform: scale(1.04);
}
.footer-holder .p2-footer-qr__link svg,
.footer-holder .p2-footer-qr__link img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Từ khóa — ngay dưới 3 cột (gọn) */
.footer-holder .p2-footer-keywords {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px 6px;
    margin: 8px 0 0;
    padding: 8px 0 0;
    border-top: 0px solid rgba(255, 255, 255, 0.18);
}
.footer-holder .p2-footer-keywords__tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

/* DesignedBy — dải mỏng sát đáy footer */
.footer-holder .p2-footer-designed {
    margin-top: 10px;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
}
.footer-holder .p2-footer-designed__text {
    margin: 0;
    color: rgb(255 255 255 / 43%);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* Giảm đệm cột footer để khối hồng thấp hơn */
.footer-holder .mt-paddingbottomsm {
    padding-bottom: 10px !important;
}
.footer-holder .p2-footer-col-connect .p2-footer-social {
    width: 100%;
    gap: 5px;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-holder .p2-footer-col-connect .p2-footer-social__btn {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.f-widget-about ul,
.f-widget-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .f-widget-about li,
    .f-widget-nav li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 8px;
        font-size: 13.5px;
    }

    .f-widget-about li i,
    .f-widget-nav li i {
        margin-top: 3px;
        color: rgba(255,255,255,.88);
    }

.mt-paddingbottomsm {
    padding-bottom: 22px;
}

/* ===================== TIỆN ÍCH CHUNG ===================== */
.truncate-h {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ===================== ĐỐI TÁC TRANG CHỦ (tham chiếu Showroom) ===================== */
.p2-partners {
    margin: 40px 0 8px;
    padding: 8px 0 4px;
    content-visibility: auto;
    contain-intrinsic-size: auto 280px;
}

.p2-partners__head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 22px;
    padding: 0 min(4vw, 20px);
}

.p2-partners__kicker {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--p2-accent);
}

.p2-partners__title {
    margin: 0 0 10px;
    /* Đồng bộ ~22px với LỰA CHỌN HÀNG ĐẦU / khối sản phẩm */
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--p2-heading);
    letter-spacing: .2px;
    transition: opacity .55s ease;
}

    .p2-partners__title.is-fading {
        opacity: .28;
    }

.p2-partners__type-wrap {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    color: var(--p2-heading);
}

.p2-partners__type-measure {
    visibility: hidden;
    pointer-events: none;
    white-space: pre;
}

.p2-partners__typed-row {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    white-space: pre;
    color: var(--p2-heading);
}

.p2-partners__type {
    color: var(--p2-heading);
}

.p2-partners__rest {
    transition: opacity .55s ease;
}

    .p2-partners__rest.is-waiting {
        opacity: 0;
        pointer-events: none;
    }

.p2-partners__caret {
    display: inline-block;
    flex: none;
    width: .09em;
    height: .85em;
    margin-left: 2px;
    background: var(--p2-accent);
    border-radius: 1px;
    animation: p2PartnersCaretBlink 1.05s steps(1, end) infinite;
    transition: opacity .3s ease;
}

    .p2-partners__caret.is-done {
        opacity: 0;
        animation: none;
    }

@keyframes p2PartnersCaretBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

.p2-partners__accent {
    color: var(--p2-accent);
    background-image: linear-gradient(110deg, #ea4575 0%, #d83287 36%, #ffd0e2 46%, #f48fb1 50%, #ffe3f0 54%, #d83287 64%, #ea4575 100%);
    background-size: 300% 100%;
    background-position: 120% center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

    .p2-partners__accent.is-ready {
        animation: p2PartnersAccentShine 7s ease-in-out infinite;
    }

@keyframes p2PartnersAccentShine {
    0%, 58% { background-position: 120% center; }
    78%, 100% { background-position: -20% center; }
}

.p2-partners__desc {
    margin: 0 auto;
    max-width: 540px;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

.p2-partners__marquee {
    position: relative;
    overflow: hidden;
    padding: 6px 0 10px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.p2-partners__track {
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    will-change: transform;
    animation: p2PartnersScroll 36s linear infinite;
}

.p2-partners__marquee:hover .p2-partners__track {
    animation-play-state: paused;
}

.p2-partners__marquee.is-static .p2-partners__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 min(4vw, 20px);
}

@keyframes p2PartnersScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.p2-partners__card {
    flex: 0 0 auto;
    width: 148px;
    height: 72px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

    .p2-partners__card:hover {
        border-color: rgba(234, 69, 117, .4);
        box-shadow: 0 8px 20px rgba(234, 69, 117, .12);
        transform: translateY(-2px);
    }

.p2-partners__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px 16px;
    text-decoration: none;
    box-sizing: border-box;
}

.p2-partners__link--static {
    cursor: default;
}

.p2-partners__logo {
    display: block;
    max-width: 100%;
    max-height: 44px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .78;
    transition: filter .25s, opacity .25s;
}

.p2-partners__card:hover .p2-partners__logo {
    filter: grayscale(0%);
    opacity: 1;
}

@media (max-width: 767.98px) {
    .p2-partners__title {
        font-size: 18px;
    }

    .p2-partners__desc {
        font-size: 13.5px;
    }
}

@media (max-width: 640px) {
    .p2-partners {
        margin-top: 28px;
    }

    .p2-partners__card {
        width: 128px;
        height: 64px;
    }

    .p2-partners__logo {
        max-height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .p2-partners__track {
        animation: none !important;
    }

    .p2-partners__caret {
        display: none !important;
    }

    .p2-partners__typed-row {
        position: static !important;
    }

    .p2-partners__type-measure {
        display: none !important;
    }

    .p2-partners__rest.is-waiting {
        opacity: 1 !important;
    }

    .p2-partners__title.is-fading {
        opacity: 1 !important;
    }

    .p2-partners__accent {
        animation: none !important;
        background: none !important;
        -webkit-text-fill-color: var(--p2-accent) !important;
        color: var(--p2-accent) !important;
    }
}

/* Home popup: /Public/SHOP/P2/style/css/ola-home-popup.css (#olaEventPopup) */


/* =============================================================================================================
   Mô tả sản phẩm (tab MÔ TẢ): trang trí h2/h3/h4/h5 phân cấp rõ ràng, chữ đậm nổi bật, liên kết, khung lưu ý.
   Đặc hiệu cao hơn quy tắc chung "ola-content-typography.css" (cỡ chữ đồng nhất) nên chỉ áp cho mô tả sản phẩm P2.
   ============================================================================================================= */
body .p2-pdp-tabs .spec-clean.p2-html-content { line-height: 1.75; }
body .p2-pdp-tabs .spec-clean.p2-html-content :is(h2, h3, h4, h5) { font-family: var(--p2-font) !important; line-height: 1.4 !important; text-align: left !important; }
body .p2-pdp-tabs .spec-clean.p2-html-content h2 {
    font-size: 1.28rem !important; font-weight: 800 !important; color: var(--p2-ink);
    margin: 1.9rem 0 .8rem !important;
    border: 0;
}
body .p2-pdp-tabs .spec-clean.p2-html-content h3 {
    font-size: 1.1rem !important; font-weight: 700 !important; color: var(--p2-rose-dark);
    margin: 1.4rem 0 .55rem !important; padding-left: .7rem; position: relative;
}
body .p2-pdp-tabs .spec-clean.p2-html-content h3::before {
    content: ""; position: absolute; left: 0; top: .42em; width: 6px; height: 6px; border-radius: 50%; background: var(--p2-gold);
}
body .p2-pdp-tabs .spec-clean.p2-html-content h4 {
    font-size: 1rem !important; font-weight: 700 !important; color: var(--p2-ink);
    margin: 1.1rem 0 .4rem !important; padding-bottom: .15rem; 
    display: inline-block;
}
body .p2-pdp-tabs .spec-clean.p2-html-content h5 {
    font-size: .88rem !important; font-weight: 700 !important; color: var(--p2-muted);
    text-transform: uppercase; letter-spacing: .06em !important; margin: 1.2rem 0 .35rem !important;
}
body .p2-pdp-tabs .spec-clean.p2-html-content > :is(h2, h3, h4, h5):first-child { margin-top: 0 !important; }
body .p2-pdp-tabs .spec-clean.p2-html-content strong,
body .p2-pdp-tabs .spec-clean.p2-html-content b { color: #111; font-weight: 700; }
body .p2-pdp-tabs .spec-clean.p2-html-content a { color: var(--p2-link); text-decoration: none; border-bottom: 1px solid rgba(10, 97, 198, .3); transition: color .15s, border-color .15s; }
body .p2-pdp-tabs .spec-clean.p2-html-content a:hover { color: var(--p2-rose-dark); border-bottom-color: var(--p2-rose-dark); }
body .p2-pdp-tabs .spec-clean.p2-html-content a strong { color: inherit; }
body .p2-pdp-tabs .spec-clean.p2-html-content ul { list-style: none; padding-left: 0; }
body .p2-pdp-tabs .spec-clean.p2-html-content ul > li { position: relative; padding-left: 1.35rem; margin-bottom: .45rem; }
body .p2-pdp-tabs .spec-clean.p2-html-content ul > li::before {
    content: ""; position: absolute; left: .2rem; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--p2-rose); transform: rotate(45deg);
}
body .p2-pdp-tabs .spec-clean.p2-html-content ol { padding-left: 1.4rem; }
body .p2-pdp-tabs .spec-clean.p2-html-content ol > li { margin-bottom: .45rem; padding-left: .25rem; }
body .p2-pdp-tabs .spec-clean.p2-html-content ol > li::marker { color: var(--p2-rose-dark); font-weight: 700; }
body .p2-pdp-tabs .spec-clean.p2-html-content .ola-prod-note {
    margin: 1.2rem 0; padding: .85rem 1rem; border-radius: 10px; background: #fff8e6; border: 1px solid #f1dfae; border-left: 4px solid var(--p2-gold); font-size: .95em; color: #5a4a14;
}
@media (max-width: 575.98px) {
    body .p2-pdp-tabs .spec-clean.p2-html-content h2 { font-size: 1.15rem !important; }
    body .p2-pdp-tabs .spec-clean.p2-html-content h3 { font-size: 1.04rem !important; }
}
/* Khung lưu ý cuối bài viết (tin tức) */
.article__fulltext .ola-post-note {
    margin: 1.4rem 0; padding: .85rem 1rem; border-radius: 10px; background: #fff8e6; border: 1px solid #f1dfae; border-left: 4px solid var(--p2-gold); font-size: .95em; color: #5a4a14; line-height: 1.65;
}
.article__fulltext .block-text a { color: var(--p2-link); text-decoration: none; border-bottom: 1px solid rgba(10, 97, 198, .3); }
.article__fulltext .block-text a:hover { color: var(--p2-rose-dark); border-bottom-color: var(--p2-rose-dark); }
/* Video dọc 9:16 (TikTok / YouTube Shorts / Vimeo dọc) — khung chính full bề ngang NỀN ĐEN, video 9:16 đúng tỉ lệ (không crop) căn giữa.
   Chiều cao khung = --p2-vert-h (theo màn hình, 420–720px); iframe rộng = cao × 9/16. */
.p2-pdp-main.is-tiktok {
    --p2-vert-h: clamp(420px, 78vh, 720px);
    aspect-ratio: auto;
    width: 100%;
    height: var(--p2-vert-h);
    max-height: none;
    margin-left: 0;
    margin-right: 0;
    background: #000;
}
.p2-pdp-main.is-tiktok .p2-main-media iframe,
.p2-pdp-main.is-tiktok .ola-ad-video--pdp > .ola-ad-video__frame iframe.ad-yt-player {
    position: absolute;
    top: 0;
    left: 50%;
    inset-inline-end: auto;
    bottom: auto;
    height: 100%;
    width: calc(var(--p2-vert-h) * 9 / 16);
    max-width: 100%;
    transform: translateX(-50%);
    border: 0;
    background: #000;
}
@media (max-width: 991.98px) {
    .p2-pdp-main.is-tiktok {
        aspect-ratio: auto;
        width: 100%;
        height: var(--p2-vert-h);
        max-height: none;
    }
}
/* Vimeo: player có thanh điều khiển riêng → không phóng to/cắt như YouTube; lấp đầy khung (ngang 5:3 chỉ có viền đen rất mỏng, dọc 9:16 dùng khung is-tiktok). */
.p2-pdp-main.is-vimeo:not(.is-tiktok) .p2-main-media iframe {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    transform: none;
    border: 0;
    display: block;
    background: #000;
}
/* Tab "MÔ TẢ / VỀ CHÚNG TÔI" (trang chi tiết sản phẩm) — thoáng, hiện đại: nhãn có khoảng thở, gạch chân hồng bo tròn dưới tab đang chọn. */
body .p2-pdp-tabs { margin-top: 1.5rem !important; }
body .p2-pdp-tabs .nav-tabs {
    display: flex; flex-wrap: nowrap; gap: .35rem;
    border-bottom: 1px solid #ececec;
    margin-bottom: 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
body .p2-pdp-tabs .nav-tabs::-webkit-scrollbar { display: none; }
body .p2-pdp-tabs .nav-tabs .nav-item { flex: 0 0 auto; }
body .p2-pdp-tabs .nav-tabs .nav-link {
    position: relative;
    /*padding: 1rem 1.6rem .95rem;*/
    font-size: .9rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    color: #8a8a8a; background: transparent; border: 0; border-radius: 0; margin-bottom: -1px;
    transition: color .2s ease, background-color .2s ease;
}
body .p2-pdp-tabs .nav-tabs .nav-link::after {
    content: ""; position: absolute; left: 1.6rem; right: 1.6rem; bottom: 0; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--p2-rose, #e4416f); transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
body .p2-pdp-tabs .nav-tabs .nav-link:hover { color: var(--p2-rose-dark, #c92f5c); background: rgba(228, 65, 111, .04); }
body .p2-pdp-tabs .nav-tabs .nav-link:focus-visible { outline: 2px solid rgba(228, 65, 111, .45); outline-offset: -2px; border-radius: 6px; }
body .p2-pdp-tabs .nav-tabs .nav-link.active { color: var(--p2-ink, #1a1a1a); background: transparent; }
body .p2-pdp-tabs .nav-tabs .nav-link.active::after { transform: scaleX(1); }
body .p2-pdp-tabs .p2-pdp-tab-content { padding: 1.5rem 0 0 !important; }
@media (max-width: 575.98px) {
    body .p2-pdp-tabs .nav-tabs .nav-link { padding: .9rem 1.1rem .85rem; font-size: .84rem; letter-spacing: .05em; }
    body .p2-pdp-tabs .nav-tabs .nav-link::after { left: 1.1rem; right: 1.1rem; }
    body .p2-pdp-tabs .p2-pdp-tab-content { padding-top: 1.15rem !important; }
}
/* Danh mục / tìm kiếm không có sản phẩm — thẻ thông báo có biểu tượng, lời nhắn và nút hành động */
.p2-plp-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 3.5rem 1.5rem 3.25rem;
    background: linear-gradient(180deg, #fffafc 0%, #fff4f8 100%);
    border: 1px solid #f6dce6; border-radius: 16px;
    box-shadow: 0 8px 28px rgba(228, 65, 111, .06);
}
.p2-plp-empty__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; margin-bottom: 1.25rem; border-radius: 50%;
    background: #fff; color: var(--p2-rose, #e4416f); font-size: 2.1rem;
    box-shadow: 0 0 0 8px rgba(228, 65, 111, .07), 0 6px 16px rgba(228, 65, 111, .12);
}
.p2-plp-empty__title { margin: 0 0 .55rem; font-size: 1.2rem; font-weight: 700; color: #3d2f35; }
.p2-plp-empty__hint { max-width: 34rem; margin: 0 auto 1.5rem; font-size: .95rem; line-height: 1.6; color: #7d7076; }
.p2-plp-empty__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.p2-plp-empty__reset { padding: .7rem 1.5rem; font-size: .92rem; box-shadow: 0 4px 12px rgba(228, 65, 111, .25); transition: transform .15s ease, box-shadow .15s ease; }
.p2-plp-empty__reset:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(228, 65, 111, .32); }
.p2-plp-empty__ghost {
    display: inline-flex; align-items: center; justify-content: center; padding: .7rem 1.5rem; border-radius: 999px;
    border: 1px solid #e8c9d4; background: #fff; color: var(--p2-rose-dark, #c92f5c) !important; font-weight: 700; font-size: .92rem; text-decoration: none !important;
    transition: background-color .15s ease, border-color .15s ease;
}
.p2-plp-empty__ghost:hover { background: #fff0f5; border-color: var(--p2-rose, #e4416f); }
@media (max-width: 575.98px) { .p2-plp-empty { padding: 2.5rem 1rem 2.25rem; } .p2-plp-empty__actions { flex-direction: column; width: 100%; } .p2-plp-empty__actions a { width: 100%; } }

/* ===== Mega menu thoáng hơn (đặt cuối để ghi đè) — khối 1 cột (VD Tin tức > Blog) rộng rãi, link có vùng hover lớn ===== */
#nav .mt-frame {
    padding: 22px 24px 18px;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .09), 0 2px 8px rgba(0, 0, 0, .04);
}

#nav .mt-frame[style*="--p2-mega-cols:1"] {
    width: 300px;
}

#nav .mt-f-box {
    gap: 8px 28px;
}

/* Mega menu ≥3 cột: ôm theo nội dung (JS đặt width: max-content) — mỗi cột vừa chữ dài nhất, cách nhau 44px, không giãn hết bề ngang */
#nav .mt-frame[style*="max-content"] .mt-f-box {
    grid-template-columns: repeat(var(--p2-mega-cols), minmax(170px, max-content));
    column-gap: 44px;
    justify-content: start;
}

#nav .mt-col {
    gap: 22px;
}

#nav .sub-dropcont .title {
    position: relative;
    margin: 0 0 8px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(0, 0, 0, .07);
    font-size: 13px;
    letter-spacing: .06em;
}

#nav .sub-dropcont .title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--p2-hover);
}

#nav .sub-drop li > a {
    margin: 0 -10px;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.4;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}

#nav .sub-drop li > a:hover {
    background: rgba(0, 0, 0, .04);
    color: var(--p2-hover);
    transform: translateX(3px);
}

/* ===== Trang khuyến mãi (/khuyen-mai) ===== */
.p2-km [hidden] { display: none !important; }
.p2-km-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; font-size: 13px; color: #888; }
.p2-km-crumb li + li::before { content: "/"; margin-right: 6px; color: #ccc; }
.p2-km-crumb a { color: #666; text-decoration: none; }
.p2-km-crumb a:hover { color: var(--p2-hover, #e93066); }
.p2-km-hero {
    display: flex; align-items: center; gap: 18px;
    margin: 0 0 18px; padding: 20px 24px;
    border-radius: 16px;
    background: linear-gradient(120deg, #fff0f5 0%, #fff7ef 100%);
    border: 1px solid rgba(228, 65, 111, .14);
}
.p2-km-hero__icon {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--p2-rose, #e4416f); color: #fff; font-size: 24px;
    box-shadow: 0 8px 20px rgba(228, 65, 111, .3);
}
.p2-km-hero .p2-plp-title { margin: 0 0 6px; }
.p2-km-hero__intro { margin: 0; color: #555; font-size: .95rem; line-height: 1.6; }
.p2-km-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.p2-km-chips__label { font-size: 13px; color: #777; margin-right: 2px; }
.p2-km-chip {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: #fff; border: 1px solid rgba(0, 0, 0, .1); color: #444;
    font-size: 13px; text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.p2-km-chip:hover { background: var(--p2-rose, #e4416f); border-color: var(--p2-rose, #e4416f); color: #fff; }
.p2-km-grid { margin-bottom: 8px; }
.p2-km-more-wrap { text-align: center; margin: 22px 0 6px; }
.p2-km-more {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-width: 240px; padding: 12px 28px; border-radius: 999px;
    border: 1px solid var(--p2-rose, #e4416f); background: #fff; color: var(--p2-rose, #e4416f);
    font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.p2-km-more i { font-size: 13px; transition: transform .25s ease; }
.p2-km-more:hover:not(:disabled), .p2-km-more:focus-visible {
    background: var(--p2-rose, #e4416f); color: #fff; outline: none;
    box-shadow: 0 8px 20px rgba(228, 65, 111, .28);
}
.p2-km-more.is-loading { opacity: .75; cursor: progress; }
.p2-km-more.is-loading i { animation: p2kmspin .8s linear infinite; }
@keyframes p2kmspin { to { transform: rotate(360deg); } }
.p2-km-status { margin: 10px 0 0; font-size: 13px; color: #888; }
.p2-km-end { text-align: center; margin: 22px 0 6px; color: #777; font-size: 14px; }
.p2-km-end i { color: #2fb36d; margin-right: 6px; }
.p2-km-seo {
    margin-top: 32px; padding-top: 22px; border-top: 1px solid rgba(0, 0, 0, .08);
    color: #555; font-size: .95rem; line-height: 1.75;
}
.p2-km-seo h2 { font-size: 1.15rem !important; margin: 18px 0 8px; }
.p2-km-seo h3 { font-size: 1.05rem !important; margin: 18px 0 8px; }
@media (max-width: 575px) {
    .p2-km-hero { padding: 16px; gap: 12px; }
    .p2-km-hero__icon { width: 44px; height: 44px; font-size: 19px; }
    .p2-km-more { width: 100%; min-width: 0; }
}

/* Trang khuyến mãi: 4 sản phẩm / hàng (desktop), 3 (tablet), 2 (mobile) — ghi đè quy tắc 3 cột của PLP có sidebar */
.p2-plp-grid.p2-km-grid.mt-productrow > li { width: 25%; }
@media (max-width: 1199.98px) {
    .p2-plp-grid.p2-km-grid.mt-productrow > li { width: 33.333%; }
}
@media (max-width: 767.98px) {
    .p2-plp-grid.p2-km-grid.mt-productrow > li { width: 50%; }
}

/* Khuyến mãi: thanh danh mục (trái) + sắp xếp (phải) */
.p2-km-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 20px; margin: 0 0 18px; }
.p2-km-toolbar .p2-km-chips { flex: 1 1 auto; min-width: 0; margin: 0; }
.p2-km-sort { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; margin: 0; white-space: nowrap; }
.p2-km-sort__label { font-size: 13px; color: #777; }
.p2-km-sort__label i { margin-right: 4px; color: var(--p2-rose, #e4416f); }
.p2-km-sort__select {
    appearance: none; -webkit-appearance: none;
    padding: 8px 34px 8px 14px; border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .14); background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center;
    color: #333; font-size: 13.5px; font-weight: 600; line-height: 1.2; cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.p2-km-sort__select:hover { border-color: var(--p2-rose, #e4416f); }
.p2-km-sort__select:focus-visible { outline: none; border-color: var(--p2-rose, #e4416f); box-shadow: 0 0 0 3px rgba(228, 65, 111, .15); }
@media (max-width: 767.98px) {
    .p2-km-toolbar { flex-direction: column; align-items: stretch; }
    .p2-km-sort { justify-content: flex-end; }
}

/* Ô "Sắp xếp" dạng Select2 (xổ xuống dùng ola-select2-dropdown.css như Admin) */
.p2-km-sort .select2-container { min-width: 190px; }
.p2-km-sort .select2-container--default .select2-selection--single.p2-km-s2-sel,
.p2-km-sort .select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    display: flex;
    align-items: center;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.p2-km-sort .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 38px 0 16px;
    line-height: 36px;
    color: #334155;
    font-size: 13.5px;
    font-weight: 600;
}
.p2-km-sort .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 10px;
}
.p2-km-sort .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent;
}
.p2-km-sort .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #3b82f6 transparent;
}
.p2-km-sort .select2-container--default:hover .select2-selection--single,
.p2-km-sort .select2-container--default.select2-container--focus .select2-selection--single,
.p2-km-sort .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
/* Danh sách xổ ra (gắn vào body): canh theo nút, bo góc + bóng như Admin */
.p2-km-s2-drop.select2-dropdown { margin-top: 6px; border-radius: 12px !important; min-width: 200px !important; }
.p2-km-s2-drop .select2-results__option { font-size: 14px !important; padding: 11px 18px !important; }

/* Khuyến mãi: thanh danh mục 1 hàng cuộn ngang + nút trái/phải khi tràn */
.p2-km-toolbar .p2-km-chips { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; overflow: hidden; }
.p2-km-chips__label { flex: 0 0 auto; white-space: nowrap; }
.p2-km-chips__scroller { position: relative; flex: 1 1 auto; min-width: 0; }
.p2-km-chips__track {
    display: flex; flex-wrap: nowrap; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    padding: 2px 0;
    cursor: grab;
}
.p2-km-chips__track::-webkit-scrollbar { display: none; }
.p2-km-chips__track:active { cursor: grabbing; }
.p2-km-chips__track .p2-km-chip { flex: 0 0 auto; white-space: nowrap; user-select: none; -webkit-user-drag: none; }
.p2-km-chips__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 30px; height: 30px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: #475569;
    font-size: 12px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
    transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.p2-km-chips__arrow--prev { left: -4px; }
.p2-km-chips__arrow--next { right: -4px; }
.p2-km-chips__arrow:hover, .p2-km-chips__arrow:focus-visible {
    background: var(--p2-rose, #e4416f); border-color: var(--p2-rose, #e4416f); color: #fff; outline: none;
}
/* Mờ dần ở mép có nội dung ẩn để gợi ý "còn nữa" */
.p2-km-chips__scroller.has-prev .p2-km-chips__track { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px); mask-image: linear-gradient(to right, transparent 0, #000 44px); }
.p2-km-chips__scroller.has-next .p2-km-chips__track { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 44px); mask-image: linear-gradient(to left, transparent 0, #000 44px); }
.p2-km-chips__scroller.has-prev.has-next .p2-km-chips__track {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%);
}
@media (max-width: 767.98px) {
    .p2-km-toolbar .p2-km-chips { flex-wrap: wrap; }
    .p2-km-chips__scroller { flex: 1 1 100%; }
    .p2-km-chips__arrow { display: none; }  /* điện thoại: vuốt ngang trực tiếp */
}

/* Sửa: nút trái/phải không đè lên chip — nằm cạnh thanh trượt (flex) và giữ đúng kích thước 30px */
.p2-km-chips__scroller { display: flex; align-items: center; gap: 8px; }
.p2-km-chips__track { flex: 1 1 auto; min-width: 0; }
.p2-km-chips__scroller .p2-km-chips__arrow {
    position: static; transform: none;
    flex: 0 0 30px; box-sizing: border-box;
    width: 30px !important; height: 30px !important;
    min-width: 30px; max-width: 30px; min-height: 30px; max-height: 30px;
    margin: 0; padding: 0 !important; line-height: 1; font-size: 12px;
    border-radius: 50% !important;
}
.p2-km-chips__scroller .p2-km-chips__arrow:hover, .p2-km-chips__scroller .p2-km-chips__arrow:focus-visible { transform: none; }
/* Đã có chỗ riêng cho nút nên bỏ lớp mờ che chữ ở mép */
.p2-km-chips__scroller.has-prev .p2-km-chips__track,
.p2-km-chips__scroller.has-next .p2-km-chips__track,
.p2-km-chips__scroller.has-prev.has-next .p2-km-chips__track { -webkit-mask-image: none; mask-image: none; }

/* Khuyến mãi: hiệu ứng hero (ánh sáng quét, lửa nhấp nháy, dòng nhấn mạnh xoay vòng) */
.p2-km-hero { position: relative; overflow: hidden; }
.p2-km-hero::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg); pointer-events: none;
    animation: p2kmShine 6s ease-in-out infinite;
}
@keyframes p2kmShine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
.p2-km-hero__icon { position: relative; animation: p2kmPulse 2.2s ease-in-out infinite; }
.p2-km-hero__icon::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--p2-rose, #e4416f); opacity: 0;
    animation: p2kmRing 2.2s ease-out infinite;
}
.p2-km-hero__icon i { display: inline-block; transform-origin: 50% 90%; animation: p2kmFlame 1.6s ease-in-out infinite; }
@keyframes p2kmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes p2kmRing { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes p2kmFlame { 0%, 100% { transform: rotate(-4deg) scale(1); } 50% { transform: rotate(4deg) scale(1.12); } }

.p2-km-ticker {
    list-style: none; margin: 10px 0 0; padding: 0;
    position: relative; height: 30px; overflow: hidden;
}
.p2-km-ticker li {
    position: absolute; left: 0; top: 0; width: 100%;
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; color: #3b3b3b; line-height: 30px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .45s ease, transform .45s ease;
}
.p2-km-ticker li.is-on { opacity: 1; transform: none; pointer-events: auto; }
.p2-km-ticker li.is-out { opacity: 0; transform: translateY(-12px); }
.p2-km-ticker li i { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; background: var(--p2-rose, #e4416f); }
.p2-km-ticker li b { color: var(--p2-rose, #e4416f); font-weight: 800; font-variant-numeric: tabular-nums; }
.p2-km-ticker.is-static li:not(:first-child) { display: none; }
@media (max-width: 575.98px) {
    .p2-km-ticker { height: 46px; }
    .p2-km-ticker li { white-space: normal; line-height: 1.35; align-items: flex-start; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .p2-km-hero::after, .p2-km-hero__icon, .p2-km-hero__icon::before, .p2-km-hero__icon i { animation: none !important; }
    .p2-km-ticker li { transition: none; }
}

/* Khuyến mãi: ô số liệu nổi bật + link trong dòng xoay vòng */
.p2-km-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 2px; }
.p2-km-tile {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 8px 14px; border-radius: 12px;
    background: rgba(255, 255, 255, .85); border: 1px solid rgba(228, 65, 111, .16);
    box-shadow: 0 4px 12px rgba(228, 65, 111, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.p2-km-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(228, 65, 111, .16); }
.p2-km-tile b { font-size: 1.35rem; font-weight: 800; line-height: 1; color: #2b2b2b; font-variant-numeric: tabular-nums; }
.p2-km-tile span { font-size: 12.5px; color: #777; }
.p2-km-tile--hot { background: var(--p2-rose, #e4416f); border-color: var(--p2-rose, #e4416f); }
.p2-km-tile--hot b, .p2-km-tile--hot span { color: #fff; }
.p2-km-ticker li a { color: #2b2b2b; font-weight: 600; text-decoration: none; border-bottom: 1px dashed rgba(0, 0, 0, .3); overflow: hidden; text-overflow: ellipsis; }
.p2-km-ticker li a:hover { color: var(--p2-rose, #e4416f); border-bottom-color: var(--p2-rose, #e4416f); }
.p2-km-ticker li > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 575.98px) {
    .p2-km-tile { padding: 7px 11px; }
    .p2-km-tile b { font-size: 1.15rem; }
}

/* Khuyến mãi: mã giảm giá (lấy từ Admin → Voucher) */
.p2-km-vouchers { margin: 0 0 22px; }
.p2-km-vouchers[hidden] { display: none !important; }
.p2-km-vouchers__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.p2-km-vouchers__head h2 { margin: 0; font-size: 1.1rem !important; font-weight: 800; color: #2b2b2b; }
.p2-km-vouchers__head h2 i { color: var(--p2-rose, #e4416f); margin-right: 6px; }
.p2-km-vouchers__head span { font-size: 13px; color: #888; }
.p2-km-vouchers__list { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.p2-km-voucher {
    position: relative; flex: 0 0 auto; width: min(380px, 88vw); display: flex; align-items: stretch;
    background: #fff; border: 1px solid rgba(228, 65, 111, .22); border-radius: 14px; overflow: hidden;
    box-shadow: 0 6px 16px rgba(228, 65, 111, .08); scroll-snap-align: start;
    transition: transform .2s ease, box-shadow .2s ease;
}
.p2-km-voucher:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(228, 65, 111, .16); }
.p2-km-voucher::before, .p2-km-voucher::after {
    content: ""; position: absolute; left: 96px; width: 14px; height: 14px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(228, 65, 111, .22); z-index: 1;
}
.p2-km-voucher::before { top: -8px; } .p2-km-voucher::after { bottom: -8px; }
.p2-km-voucher__value {
    flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 12px 8px; color: #fff; text-align: center;
    background: linear-gradient(160deg, var(--p2-rose, #e4416f), #ff7a59);
    border-right: 2px dashed rgba(255, 255, 255, .6);
}
.p2-km-voucher__value b { font-size: 1.45rem; font-weight: 800; line-height: 1.1; }
.p2-km-voucher__value span { font-size: 11px; opacity: .9; }
.p2-km-voucher__body { flex: 1 1 auto; min-width: 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.p2-km-voucher__name { font-size: 14.5px; color: #2b2b2b; line-height: 1.3; }
.p2-km-voucher__meta { list-style: none; margin: 0; padding: 0; font-size: 12.5px; color: #666; display: grid; gap: 2px; }
.p2-km-voucher__meta li::before { content: "•"; color: var(--p2-rose, #e4416f); margin-right: 6px; }
.p2-km-voucher__meta b { color: var(--p2-rose, #e4416f); }
.p2-km-voucher__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.p2-km-voucher__time { font-size: 12px; color: #888; }
.p2-km-voucher__time b { color: #2b2b2b; font-variant-numeric: tabular-nums; }
.p2-km-voucher.is-soon .p2-km-voucher__time b { color: var(--p2-rose, #e4416f); }
.p2-km-voucher.is-expired { opacity: .5; filter: grayscale(.6); pointer-events: none; }
.p2-km-voucher__copy {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; overflow: hidden;
    border: 1px dashed var(--p2-rose, #e4416f); border-radius: 8px; background: #fff5f8; cursor: pointer;
    color: var(--p2-rose, #e4416f); font-size: 12.5px; font-weight: 700; line-height: 1;
    transition: background .15s ease, color .15s ease;
}
.p2-km-voucher__code { padding: 7px 10px; letter-spacing: .04em; }
.p2-km-voucher__copytext { padding: 7px 10px; background: var(--p2-rose, #e4416f); color: #fff; white-space: nowrap; font-weight: 600; }
.p2-km-voucher__copy:hover .p2-km-voucher__copytext, .p2-km-voucher__copy:focus-visible .p2-km-voucher__copytext { filter: brightness(1.08); }
.p2-km-voucher__copy.is-copied .p2-km-voucher__copytext { background: #2fb36d; }
.p2-km-voucher__copy:focus-visible { outline: 2px solid var(--p2-rose, #e4416f); outline-offset: 2px; }
.p2-km-ticker li a b { color: inherit; }
@media (max-width: 575.98px) {
    .p2-km-voucher__value { flex-basis: 84px; }
    .p2-km-voucher::before, .p2-km-voucher::after { left: 76px; }
    .p2-km-voucher__value b { font-size: 1.2rem; }
}

/* Voucher khuyến mãi v2: thẻ phiếu có khuyết tròn thật (mask), chip điều kiện, nút sao chép gọn */
.p2-km-vouchers__head h2 i { display: none; }
.p2-km-vouchers__list { align-items: stretch; gap: 16px; padding: 6px 4px 14px; }
.p2-km-vouchers .p2-km-voucher {
    position: relative; display: block; flex: 0 0 auto; width: min(400px, 88vw);
    border: 0; border-radius: 0; background: none; overflow: visible; box-shadow: none;
    filter: drop-shadow(0 6px 12px rgba(228, 65, 111, .16));
    transition: transform .22s ease, filter .22s ease;
}
.p2-km-vouchers .p2-km-voucher::before, .p2-km-vouchers .p2-km-voucher::after { content: none; }
.p2-km-vouchers .p2-km-voucher:hover { transform: translateY(-3px); filter: drop-shadow(0 12px 20px rgba(228, 65, 111, .24)); }
.p2-km-voucher__card {
    display: flex; align-items: stretch; height: 100%; box-sizing: border-box;
    background: #fff; border: 1px solid rgba(228, 65, 111, .2); border-radius: 14px; overflow: hidden;
    -webkit-mask:
        radial-gradient(circle 9px at 108px 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 9px at 108px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
    mask:
        radial-gradient(circle 9px at 108px 0, #0000 97%, #000) top / 100% 51% no-repeat,
        radial-gradient(circle 9px at 108px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.p2-km-vouchers .p2-km-voucher__value {
    flex: 0 0 108px; gap: 4px; padding: 14px 8px;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 45%),
        linear-gradient(165deg, var(--p2-rose, #e4416f) 0%, #ff7a59 100%);
    border-right: 2px dashed rgba(255, 255, 255, .65);
}
.p2-km-vouchers .p2-km-voucher__value b { font-size: 1.55rem; letter-spacing: -.01em; text-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.p2-km-vouchers .p2-km-voucher__value span { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; opacity: .92; }
.p2-km-vouchers .p2-km-voucher__body { padding: 14px 16px 12px; gap: 8px; }
.p2-km-vouchers .p2-km-voucher__name {
    font-size: 15px; font-weight: 800; color: #1f2937; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p2-km-voucher__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.p2-km-tag {
    display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
    background: #f3f4f6; color: #475569; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.p2-km-tag--main { background: #fff0f4; color: var(--p2-rose, #e4416f); }
.p2-km-tag--left { background: #fff7e6; color: #b45309; }
.p2-km-voucher__scope {
    margin: 0; font-size: 12.5px; color: #64748b; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.p2-km-vouchers .p2-km-voucher__foot { padding-top: 10px; border-top: 1px dashed rgba(0, 0, 0, .12); gap: 8px 10px; }
/* Dòng thời gian «28/10 – 15/11/2026 · còn 18 ngày»: MỘT hàng, chiếm cả hàng foot (nút sao chép nằm hàng dưới), quá dài thì cắt «…» — không tràn ra ngoài thẻ */
.p2-km-vouchers .p2-km-voucher__time { flex: 1 1 100%; min-width: 0; font-size: 12px; line-height: 1.5; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-km-voucher__time i { margin-right: 4px; color: #94a3b8; }
.p2-km-vouchers .p2-km-voucher__copy {
    border: 1.5px dashed var(--p2-rose, #e4416f); border-radius: 9px; background: #fff;
    box-shadow: none; transition: box-shadow .15s ease, transform .15s ease;
}
.p2-km-vouchers .p2-km-voucher__copy:hover { box-shadow: 0 6px 14px rgba(228, 65, 111, .22); transform: translateY(-1px); }
.p2-km-vouchers .p2-km-voucher__code { padding: 7px 10px; font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--p2-rose, #e4416f); }
.p2-km-vouchers .p2-km-voucher__copytext { padding: 7px 11px; border-radius: 0; }
.p2-km-vouchers .p2-km-voucher.is-expired .p2-km-voucher__card { opacity: .5; filter: grayscale(.6); }
@media (max-width: 575.98px) {
    .p2-km-vouchers .p2-km-voucher { width: min(340px, 90vw); }
    .p2-km-voucher__card { -webkit-mask: radial-gradient(circle 9px at 88px 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 88px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 9px at 88px 0, #0000 97%, #000) top / 100% 51% no-repeat, radial-gradient(circle 9px at 88px 100%, #0000 97%, #000) bottom / 100% 51% no-repeat; }
    .p2-km-vouchers .p2-km-voucher__value { flex-basis: 88px; }
    .p2-km-vouchers .p2-km-voucher__value b { font-size: 1.25rem; }
}

/* Voucher: nút trái/phải đè lên mép (KHÔNG đổi bố cục => không giật), không snap, không scroll-behavior CSS */
.p2-km-vouchers__scroller { position: relative; }
.p2-km-vouchers__scroller .p2-km-vouchers__list {
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: none; scroll-behavior: auto;
    overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
    cursor: grab; will-change: scroll-position; touch-action: pan-x pan-y;
}
.p2-km-vouchers__scroller .p2-km-vouchers__list::-webkit-scrollbar { display: none; width: 0; height: 0; }
.p2-km-vouchers__scroller .p2-km-voucher { scroll-snap-align: none; flex: 0 0 auto; }
.p2-km-vouchers__scroller .p2-km-vouchers__list.is-dragging { cursor: grabbing; user-select: none; }
.p2-km-vouchers__scroller .p2-km-vouchers__list.is-dragging .p2-km-voucher { pointer-events: none; transition: none; }
.p2-km-vouchers__scroller .p2-km-voucher__copy { cursor: pointer; }
.p2-km-arrow {
    position: absolute; top: 50%; z-index: 3; margin: -19px 0 0; padding: 0 !important;
    width: 38px !important; height: 38px !important; min-width: 38px; max-width: 38px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: 50% !important; background: #fff; color: #475569;
    font-size: 13px; cursor: pointer; box-shadow: 0 4px 12px rgba(15, 23, 42, .18);
    opacity: 1; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.p2-km-arrow--prev { left: -6px; }
.p2-km-arrow--next { right: -6px; }
.p2-km-arrow:hover, .p2-km-arrow:focus-visible { background: var(--p2-rose, #e4416f); border-color: var(--p2-rose, #e4416f); color: #fff; outline: none; }
.p2-km-arrow.is-off { opacity: 0; pointer-events: none; }
.p2-km [hidden].p2-km-arrow { display: none !important; }
@media (max-width: 575.98px) { .p2-km-arrow { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .p2-km-arrow { transition: none; } }
/* ===== Khuyến mãi v3: hero banner gradient + đồng hồ đếm ngược + lưới điểm nổi bật + lưới mã giảm giá (hiện hết) ===== */
.p2-km-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 30px; align-items: center;
    margin: 0 0 24px; padding: 30px 34px; border: 0; border-radius: 22px; color: #fff;
    background:
        radial-gradient(760px 280px at 88% -30%, rgba(255, 214, 102, .38), rgba(255, 214, 102, 0) 62%),
        radial-gradient(520px 260px at -5% 115%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%),
        linear-gradient(125deg, #c81f58 0%, #e4416f 46%, #ff7a45 100%);
    box-shadow: 0 18px 42px rgba(228, 65, 111, .3);
}
.p2-km-hero::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%); }
.p2-km-hero__main { display: flex; align-items: flex-start; gap: 20px; min-width: 0; position: relative; z-index: 1; }
.p2-km-hero__icon { width: 66px; height: 66px; font-size: 29px; background: #fff; color: #e4416f; box-shadow: 0 10px 24px rgba(120, 10, 50, .3); }
.p2-km-hero__icon::before { border-color: #fff; }
.p2-km-hero__text { min-width: 0; }
.p2-km-hero__kicker {
    display: inline-block; margin: 0 0 10px; padding: 4px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
    font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.p2-km-hero .p2-plp-title { color: #fff !important; font-size: clamp(1.45rem, 2.6vw, 2.15rem); font-weight: 800; line-height: 1.2; margin: 0 0 10px; text-shadow: 0 2px 10px rgba(90, 10, 40, .25); }
.p2-km-hero__intro { color: rgba(255, 255, 255, .93); font-size: .97rem; line-height: 1.65; margin: 0; max-width: 62ch; }
.p2-km-hero__intro strong { color: #fff; font-weight: 800; }
.p2-km-hero .p2-km-tiles { margin: 16px 0 0; gap: 12px; }
.p2-km-hero .p2-km-tile { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .32); box-shadow: none; padding: 10px 16px; backdrop-filter: blur(4px); }
.p2-km-hero .p2-km-tile b { color: #fff; font-size: 1.5rem; }
.p2-km-hero .p2-km-tile span { color: rgba(255, 255, 255, .85); }
.p2-km-hero .p2-km-tile--hot { background: #fff; border-color: #fff; }
.p2-km-hero .p2-km-tile--hot b { color: #d62a5e; }
.p2-km-hero .p2-km-tile--hot span { color: #8a4a5e; }

/* Đồng hồ đếm ngược */
.p2-km-cd {
    position: relative; z-index: 1; min-width: 330px; padding: 18px 20px 16px; border-radius: 18px; text-align: center;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34); backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(90, 10, 40, .2);
}
.p2-km-cd__head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.p2-km-cd__head i { color: #ffe08a; animation: p2kmSand 2.4s ease-in-out infinite; }
@keyframes p2kmSand { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(180deg); } }
.p2-km-cd__boxes { display: flex; align-items: flex-start; justify-content: center; gap: 6px; }
.p2-km-cd__boxes > i { font-style: normal; font-weight: 800; font-size: 1.6rem; line-height: 52px; color: #ffe08a; animation: p2kmBlink 1s steps(2, jump-none) infinite; }
@keyframes p2kmBlink { 0% { opacity: 1; } 100% { opacity: .25; } }
.p2-km-cd__box { width: 62px; text-align: center; }
.p2-km-cd__box b {
    display: block; height: 52px; line-height: 52px; border-radius: 12px; background: #fff; color: #d62a5e;
    font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em;
    box-shadow: 0 6px 14px rgba(90, 10, 40, .22), inset 0 -3px 0 rgba(228, 65, 111, .14);
}
.p2-km-cd__box b.is-flip { animation: p2kmFlip .45s ease; }
@keyframes p2kmFlip { 0% { transform: translateY(-38%) scale(.94); opacity: .2; } 100% { transform: none; opacity: 1; } }
.p2-km-cd__box span { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.p2-km-cd.is-soon .p2-km-cd__box b { color: #fff; background: linear-gradient(180deg, #ff4d4d, #d62a2a); animation: p2kmUrgent 1.2s ease-in-out infinite; }
.p2-km-cd.is-soon .p2-km-cd__box b.is-flip { animation: p2kmFlip .45s ease, p2kmUrgent 1.2s ease-in-out infinite; }
@keyframes p2kmUrgent { 0%, 100% { box-shadow: 0 6px 14px rgba(90, 10, 40, .22), 0 0 0 0 rgba(255, 255, 255, .5); } 50% { box-shadow: 0 6px 14px rgba(90, 10, 40, .22), 0 0 0 7px rgba(255, 255, 255, 0); } }
.p2-km-cd__note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.p2-km-cd__note b { color: #ffe08a; letter-spacing: .04em; }
.p2-km-cd__cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 9px 20px; border-radius: 999px;
    background: #fff; color: #d62a5e !important; font-weight: 800; font-size: 13.5px; text-decoration: none !important;
    box-shadow: 0 6px 16px rgba(90, 10, 40, .22); transition: transform .18s ease, box-shadow .18s ease;
}
.p2-km-cd__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(90, 10, 40, .3); }
.p2-km-cd__cta i { animation: p2kmBounce 1.4s ease-in-out infinite; }
@keyframes p2kmBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }

/* Điểm nổi bật: hiện TẤT CẢ dạng lưới thay vì xoay từng dòng */
.p2-km-ticker.is-grid {
    grid-column: 1 / -1; position: relative; z-index: 1; height: auto; overflow: visible; margin: 2px 0 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px;
}
.p2-km-ticker.is-grid li {
    position: static; width: auto; opacity: 1; transform: none; pointer-events: auto;
    display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 14px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .24);
    color: #fff; font-size: 13.5px; line-height: 1.45; white-space: normal; overflow: visible;
    transition: background .2s ease, transform .2s ease;
}
.p2-km-ticker.is-grid li:hover { background: rgba(255, 255, 255, .22); transform: translateY(-2px); }
.p2-km-ticker.is-grid li i { width: 28px; height: 28px; font-size: 12px; background: #fff; color: #d62a5e; margin-top: 1px; }
.p2-km-ticker.is-grid li b { color: #ffe08a; }
.p2-km-ticker.is-grid li a { color: #fff; border-bottom: 1px dashed rgba(255, 255, 255, .65); }
.p2-km-ticker.is-grid li a:hover { color: #ffe08a; border-bottom-color: #ffe08a; }
.p2-km-ticker.is-grid li > span { overflow: visible; text-overflow: clip; }

/* Mã giảm giá: lưới hiện hết, không còn hàng cuộn ngang */
.p2-km-vouchers { margin: 0 0 28px; }
.p2-km-vouchers__head { margin-bottom: 14px; }
.p2-km-vouchers__head h2 { font-size: 1.3rem !important; }
.p2-km-vouchers__list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 18px;
    overflow: visible; padding: 6px 2px 10px; cursor: auto;
}
.p2-km-vouchers .p2-km-voucher { width: auto; max-width: none; }

@media (max-width: 991.98px) {
    .p2-km-hero { grid-template-columns: minmax(0, 1fr); padding: 24px 22px; }
    .p2-km-cd { min-width: 0; }
}
@media (max-width: 575.98px) {
    .p2-km-hero { padding: 20px 16px; border-radius: 18px; }
    .p2-km-hero__main { gap: 14px; }
    .p2-km-hero__icon { width: 48px; height: 48px; font-size: 20px; }
    .p2-km-cd__box { width: 54px; }
    .p2-km-cd__box b { font-size: 1.45rem; height: 46px; line-height: 46px; }
    .p2-km-cd__boxes > i { line-height: 46px; }
    .p2-km-ticker.is-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .p2-km-cd__head i, .p2-km-cd__boxes > i, .p2-km-cd__box b, .p2-km-cd__cta i, .p2-km-cd.is-soon .p2-km-cd__box b { animation: none !important; }
}

/* ===== Khuyến mãi v4: bỏ vệt sáng quét chung; hiệu ứng riêng cho từng mục con (nhẹ, gây chú ý đúng chỗ) ===== */
.p2-km-hero::after { content: none !important; animation: none !important; display: none; }

/* Nhãn «Ưu đãi đang diễn ra»: chấm LIVE nhấp nháy */
.p2-km-hero__kicker { position: relative; padding-left: 28px; }
.p2-km-hero__kicker::before {
    content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
    background: #5dffa0; box-shadow: 0 0 0 0 rgba(93, 255, 160, .7); animation: p2kmLive 1.6s ease-out infinite;
}
@keyframes p2kmLive { 0% { box-shadow: 0 0 0 0 rgba(93, 255, 160, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(93, 255, 160, 0); } }

/* Tiêu đề + đoạn giới thiệu + ô số liệu + thẻ điểm nổi bật: lần lượt trượt lên khi vào trang (một lần) */
.p2-km-hero__kicker, .p2-km-hero .p2-plp-title, .p2-km-hero__intro, .p2-km-hero .p2-km-tile, .p2-km-cd, .p2-km-ticker.is-grid li {
    animation: p2kmRise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.p2-km-hero .p2-plp-title { animation-delay: .06s; }
.p2-km-hero__intro { animation-delay: .12s; }
.p2-km-hero .p2-km-tile:nth-child(1) { animation-delay: .2s; }
.p2-km-hero .p2-km-tile:nth-child(2) { animation-delay: .28s; }
.p2-km-hero .p2-km-tile:nth-child(3) { animation-delay: .36s; }
.p2-km-cd { animation-delay: .24s; }
.p2-km-ticker.is-grid li:nth-child(1) { animation-delay: .34s; }
.p2-km-ticker.is-grid li:nth-child(2) { animation-delay: .4s; }
.p2-km-ticker.is-grid li:nth-child(3) { animation-delay: .46s; }
.p2-km-ticker.is-grid li:nth-child(4) { animation-delay: .52s; }
.p2-km-ticker.is-grid li:nth-child(n+5) { animation-delay: .58s; }
@keyframes p2kmRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Ô «giảm cao nhất»: quầng sáng thở nhẹ — điểm nhấn số 1 của hero */
.p2-km-hero .p2-km-tile--hot { animation: p2kmRise .6s cubic-bezier(.2, .7, .2, 1) .28s both, p2kmGlow 2.6s ease-in-out 1s infinite; }
@keyframes p2kmGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); } }

/* Nút «Lấy mã ngay»: vòng sóng lan tỏa kêu gọi bấm */
.p2-km-cd__cta { position: relative; }
.p2-km-cd__cta::before {
    content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid #fff; opacity: 0;
    animation: p2kmRipple 2.2s ease-out 1.2s infinite; pointer-events: none;
}
@keyframes p2kmRipple { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.35, 1.7); opacity: 0; } }

/* Thẻ điểm nổi bật: biểu tượng nảy nhẹ khi rê chuột */
.p2-km-ticker.is-grid li:hover i { animation: p2kmPop .5s ease; }
@keyframes p2kmPop { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .p2-km-hero__kicker::before, .p2-km-hero__kicker, .p2-km-hero .p2-plp-title, .p2-km-hero__intro, .p2-km-hero .p2-km-tile,
    .p2-km-hero .p2-km-tile--hot, .p2-km-cd, .p2-km-cd__cta::before, .p2-km-ticker.is-grid li, .p2-km-ticker.is-grid li:hover i { animation: none !important; }
}

/* ===== Khuyến mãi v5: bố cục co giãn khi có NHIỀU mã giảm giá (gọn 6 mã đầu, xem tất cả có khung cuộn, ô tìm mã) ===== */
.p2-km-vouchers__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.p2-km-vouchers__head h2 { display: flex; align-items: center; gap: 10px; }
.p2-km-vouchers__count { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 11px; border-radius: 999px; background: #fff0f4; color: var(--p2-rose, #e4416f); letter-spacing: .02em; }
.p2-km-vouchers__head > span { flex: 1 1 260px; min-width: 0; }
.p2-km-vouchers__search {
    flex: 0 1 260px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 14px; height: 40px;
    border: 1px solid #e5e7eb; border-radius: 999px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.p2-km-vouchers__search:focus-within { border-color: var(--p2-rose, #e4416f); box-shadow: 0 0 0 3px rgba(228, 65, 111, .14); }
.p2-km-vouchers__search i { color: #94a3b8; font-size: 13px; }
.p2-km-vouchers__search input { flex: 1 1 auto; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; height: 38px; padding: 0 !important; font-size: 14px; }

/* Gọn: chỉ 6 mã đầu (ưu tiên mã sắp hết hạn vì danh sách đã xếp theo hạn) */
.p2-km-vouchers__list.is-collapsed .p2-km-voucher:nth-child(n+7) { display: none; }
.p2-km-vouchers__list.is-expanded,
.p2-km-vouchers__list.is-searching {
    max-height: 760px; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px;
    scrollbar-width: thin; scrollbar-color: rgba(228, 65, 111, .45) transparent;
}
.p2-km-vouchers__list.is-expanded::-webkit-scrollbar, .p2-km-vouchers__list.is-searching::-webkit-scrollbar { width: 8px; }
.p2-km-vouchers__list.is-expanded::-webkit-scrollbar-thumb, .p2-km-vouchers__list.is-searching::-webkit-scrollbar-thumb { background: rgba(228, 65, 111, .4); border-radius: 8px; }
.p2-km-vouchers__more { display: flex; justify-content: center; margin: 6px 0 0; }
.p2-km-vouchers__more[hidden], .p2-km-vouchers__empty[hidden] { display: none !important; }
.p2-km-vouchers__more button {
    display: inline-flex; align-items: center; gap: 10px; padding: 11px 26px; border-radius: 999px; cursor: pointer;
    border: 1.5px solid var(--p2-rose, #e4416f); background: #fff; color: var(--p2-rose, #e4416f); font-weight: 800; font-size: 14px;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.p2-km-vouchers__more button:hover { background: var(--p2-rose, #e4416f); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(228, 65, 111, .25); }
.p2-km-vouchers__more button i { transition: transform .25s ease; }
.p2-km-vouchers__more button.is-open i { transform: rotate(180deg); }
.p2-km-vouchers__empty { text-align: center; color: #94a3b8; padding: 22px 0; margin: 0; }
@media (max-width: 575.98px) {
    .p2-km-vouchers__search { flex: 1 1 100%; }
    .p2-km-vouchers__list.is-expanded, .p2-km-vouchers__list.is-searching { max-height: 640px; }
}

/* ===== Khuyến mãi v6: hero cân đều + dải mã giảm giá xoay từng mã (không phình khi có nhiều mã) ===== */
.p2-km-hero { grid-template-columns: minmax(0, 1fr) 360px; align-items: stretch; gap: 20px 28px; }
.p2-km-hero__main { align-items: center; }
.p2-km-cd { min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.p2-km-cd__note { max-width: 30ch; }

/* Lưới điểm nổi bật: 3 cột, thẻ cao bằng nhau, nội dung canh giữa theo chiều dọc */
.p2-km-ticker.is-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.p2-km-ticker.is-grid li { align-items: center; min-height: 64px; }

/* Dải mã giảm giá: một mã mỗi lần */
.p2-km-vrot {
    grid-column: 1 / -1; position: relative; z-index: 1; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 0 16px; min-height: 60px; border-radius: 16px;
    background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(5px);
    animation: p2kmRise .6s cubic-bezier(.2, .7, .2, 1) .5s both;
}
.p2-km-vrot__label { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.p2-km-vrot__label i { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #d62a5e; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.p2-km-vrot__list { list-style: none; margin: 0; padding: 0; position: relative; height: 60px; }
.p2-km-vrot__list li {
    position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; min-width: 0; white-space: nowrap;
    opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .45s ease, transform .45s ease;
}
.p2-km-vrot__list li.is-on { opacity: 1; transform: none; pointer-events: auto; }
.p2-km-vrot__code {
    flex: none; padding: 5px 14px; border-radius: 9px; background: #fff; color: #d62a5e !important; font-weight: 800; font-size: 14px;
    letter-spacing: .06em; text-decoration: none !important; border: 1.5px dashed rgba(214, 42, 94, .5);
}
.p2-km-vrot__code:hover { background: #fff5f8; }
.p2-km-vrot__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.p2-km-vrot__left { flex: none; margin-left: auto; padding: 3px 11px; border-radius: 999px; background: rgba(0, 0, 0, .16); font-size: 12.5px; white-space: nowrap; }
.p2-km-vrot__left b { color: #ffe08a; font-variant-numeric: tabular-nums; }
.p2-km-vrot__nav { display: inline-flex; align-items: center; gap: 8px; }
.p2-km-vrot__nav em { font-style: normal; font-size: 12.5px; font-weight: 700; min-width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
.p2-km-vrot__nav button {
    width: 30px; height: 30px; padding: 0 !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14);
    color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.p2-km-vrot__nav button:hover { background: #fff; color: #d62a5e; }
.p2-km-vrot.is-single .p2-km-vrot__nav { display: none; }
.p2-km-vrot.is-single .p2-km-vrot__list li { position: static; opacity: 1; transform: none; height: 60px; }
/* Thanh tiến trình tới lần đổi mã kế */
.p2-km-vrot__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #ffe08a; }
.p2-km-vrot.is-run .p2-km-vrot__bar { animation: p2kmVBar 3.8s linear forwards; }
@keyframes p2kmVBar { from { width: 0; } to { width: 100%; } }

@media (max-width: 991.98px) {
    .p2-km-hero { grid-template-columns: minmax(0, 1fr); }
    .p2-km-ticker.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .p2-km-ticker.is-grid { grid-template-columns: minmax(0, 1fr); }
    .p2-km-vrot { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 12px; }
    .p2-km-vrot__label { display: none; }
    .p2-km-vrot__list { height: 74px; }
    .p2-km-vrot__list li { flex-wrap: wrap; row-gap: 4px; white-space: normal; align-content: center; }
    .p2-km-vrot__left { margin-left: 0; }
    .p2-km-vrot.is-single .p2-km-vrot__list li { height: 74px; }
}
@media (prefers-reduced-motion: reduce) {
    .p2-km-vrot { animation: none !important; }
    .p2-km-vrot__list li { transition: none; }
    .p2-km-vrot.is-run .p2-km-vrot__bar { animation: none !important; }
}

/* ── Lịch FREESHIP toàn quốc sắp tới (/khuyen-mai) ── */
.p2-km-soon { margin: 0 0 22px; padding: 16px 18px 18px; border-radius: 16px; background: linear-gradient(180deg, #f0f9ff, #fff); border: 1px solid #bae6fd; }
.p2-km-soon__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.p2-km-soon__head h2 { margin: 0; font-size: 1.05rem; font-weight: 800; color: #0f172a; }
.p2-km-soon__head h2 i { color: #0284c7; margin-right: 6px; }
.p2-km-soon__head h2 em { font-style: normal; font-size: .72rem; font-weight: 700; color: #0369a1; background: #e0f2fe; border-radius: 999px; padding: 2px 9px; margin-left: 6px; }
.p2-km-soon__head span { font-size: .8rem; color: #64748b; }
.p2-km-soon__scroller { position: relative; }
.p2-km-soon__track { list-style: none; margin: 0; padding: 2px 2px 6px; display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; }
.p2-km-soon__track::-webkit-scrollbar { display: none; }
.p2-km-soon__item { flex: 0 0 auto; width: min(330px, 86vw); display: flex; gap: 12px; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid #e0f2fe; box-shadow: 0 2px 10px rgba(2, 132, 199, .08); scroll-snap-align: start; transition: transform .2s, box-shadow .2s; }
.p2-km-soon__item:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(2, 132, 199, .16); }
.p2-km-soon__date { flex: none; width: 58px; height: 62px; border-radius: 12px; background: linear-gradient(160deg, #0ea5e9, #0369a1); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; box-shadow: 0 4px 10px rgba(3, 105, 161, .3); }
.p2-km-soon__date b { font-size: 1.05rem; }
.p2-km-soon__date span { font-size: .62rem; opacity: .9; margin-top: 3px; }
.p2-km-soon__body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.p2-km-soon__body strong { font-size: .9rem; line-height: 1.3; color: #0f172a; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p2-km-soon__tags { display: flex; flex-wrap: wrap; gap: 5px; }
.p2-km-soon__cd { font-size: .76rem; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p2-km-soon__cd i { margin-right: 4px; color: #94a3b8; }
.p2-km-soon__live { color: #0369a1; font-variant-numeric: tabular-nums; }
.p2-km-soon__item.is-soon .p2-km-soon__live { color: #e4416f; }
.p2-km-soon__item.is-live { border-color: #86efac; }
.p2-km-soon__item.is-live .p2-km-soon__cd { color: #15803d; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .p2-km-soon__item { transition: none; } }
/* ── Hero /khuyen-mai: cột phải luôn có nội dung (đồng hồ freeship / khung «giảm sâu») ── */
.p2-km-cd--ship .p2-km-cd__head i { animation: p2kmDrive 1.8s ease-in-out infinite; }
@keyframes p2kmDrive { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(4px); } }
.p2-km-deals {
    position: relative; z-index: 1; width: 360px; max-width: 100%; box-sizing: border-box; padding: 16px 16px 14px; border-radius: 18px;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34); backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(90, 10, 40, .2);
}
.p2-km-deals__head { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.p2-km-deals__head i { color: #ffe08a; animation: p2kmFlame 1.6s ease-in-out infinite; }
.p2-km-deals__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.p2-km-deals__item {
    position: relative; display: flex; align-items: center; gap: 11px; padding: 8px 52px 8px 8px; border-radius: 13px;
    background: #fff; color: #1f2937 !important; text-decoration: none !important; box-shadow: 0 6px 14px rgba(90, 10, 40, .18);
    transition: transform .18s ease, box-shadow .18s ease;
}
.p2-km-deals__item:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(90, 10, 40, .28); }
.p2-km-deals__img { flex: none; width: 54px; height: 54px; border-radius: 10px; overflow: hidden; background: #f3f4f6; }
.p2-km-deals__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p2-km-deals__txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.p2-km-deals__txt strong { font-size: 12.5px; font-weight: 700; line-height: 1.3; color: #1f2937; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p2-km-deals__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px; }
.p2-km-deals__price b { font-size: 13.5px; font-weight: 800; color: #d62a5e; }
.p2-km-deals__price s { font-size: 11.5px; color: #94a3b8; }
.p2-km-deals__pct { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; font-weight: 800; color: #fff; padding: 4px 8px; border-radius: 8px; background: linear-gradient(180deg, #ff5d7e, #d62a5e); box-shadow: 0 4px 10px rgba(214, 42, 94, .35); }
@media (max-width: 991.98px) { .p2-km-deals { width: auto; } }
@media (prefers-reduced-motion: reduce) { .p2-km-cd--ship .p2-km-cd__head i, .p2-km-deals__head i { animation: none !important; } .p2-km-deals__item { transition: none; } }
/* ===== Hero /khuyen-mai: giao diện đổi theo NGÀY LỄ / NGÀY SĂN SALE / THÁNG (biến màu do script đặt trên .p2-km-hero; không có script thì giữ màu hồng mặc định) ===== */
.p2-km-hero {
    --km-1: #c81f58; --km-2: #e4416f; --km-3: #ff7a45; --km-ink: #d62a5e; --km-gold: #ffe08a; --km-glow: rgba(255, 214, 102, .38); --km-shadow: rgba(228, 65, 111, .3);
    background:
        radial-gradient(760px 280px at 88% -30%, var(--km-glow), rgba(255, 255, 255, 0) 62%),
        radial-gradient(520px 260px at -5% 115%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%),
        linear-gradient(125deg, var(--km-1) 0%, var(--km-2) 46%, var(--km-3) 100%);
    box-shadow: 0 18px 42px var(--km-shadow);
    transition: box-shadow .4s ease;
}
/* Màu CHỮ / nhấn trong hero theo bộ màu của dịp */
.p2-km-hero__icon { color: var(--km-ink); }
.p2-km-hero .p2-km-tile--hot b { color: var(--km-ink); }
.p2-km-cd__head i, .p2-km-cd__boxes > i, .p2-km-cd__note b, .p2-km-deals__head i,
.p2-km-ticker.is-grid li b, .p2-km-vrot__left b { color: var(--km-gold); }
.p2-km-ticker.is-grid li a:hover { color: var(--km-gold); border-bottom-color: var(--km-gold); }
.p2-km-cd__box b { color: var(--km-ink); }
.p2-km-cd__cta { color: var(--km-ink) !important; }
.p2-km-ticker.is-grid li i, .p2-km-vrot__label i { color: var(--km-ink); }
.p2-km-vrot__code { color: var(--km-ink) !important; }
.p2-km-vrot__nav button:hover { color: var(--km-ink); }
.p2-km-vrot__bar { background: var(--km-gold); }
.p2-km-deals__price b { color: var(--km-ink); }
.p2-km-deals__pct { background: linear-gradient(180deg, var(--km-2), var(--km-1)); }

/* Chip câu giới thiệu theo dịp (dưới dòng nhãn) */

/* Lớp trang trí: nằm dưới nội dung, không chặn thao tác */
.p2-km-hero__main, .p2-km-cd, .p2-km-deals, .p2-km-ticker, .p2-km-vrot { z-index: 1; }

/* ===== Hero /khuyen-mai — bản MÀU NHẸ (pastel, chữ tối): hợp mọi ngành hàng; ghi đè các quy tắc nền tối/chữ trắng phía trên ===== */
.p2-km-hero {
    --km-1: #fff1f2; --km-2: #ffe4e6; --km-3: #fce7f3; --km-ink: #be123c; --km-glow: rgba(244, 63, 94, .14); --km-shadow: rgba(15, 23, 42, .1);
    --km-fg: #1f2937; --km-fg2: #475569;
    color: var(--km-fg); border: 1px solid rgba(15, 23, 42, .06);
    background:
        radial-gradient(760px 280px at 88% -30%, var(--km-glow), rgba(255, 255, 255, 0) 62%),
        radial-gradient(520px 260px at -5% 115%, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 60%),
        linear-gradient(125deg, var(--km-1) 0%, var(--km-2) 50%, var(--km-3) 100%);
    box-shadow: 0 14px 34px var(--km-shadow);
}
.p2-km-hero__icon { color: var(--km-ink); box-shadow: 0 8px 20px rgba(15, 23, 42, .12); }
.p2-km-hero__icon::before { border-color: var(--km-ink); }
.p2-km-hero__kicker { background: var(--km-ink); border-color: var(--km-ink); color: #fff; }
.p2-km-hero .p2-plp-title { color: var(--km-fg) !important; text-shadow: none; }
.p2-km-hero__intro { color: var(--km-fg2); }
.p2-km-hero__intro strong { color: var(--km-fg); }
.p2-km-hero .p2-km-tile { background: rgba(255, 255, 255, .8); border: 1px solid rgba(15, 23, 42, .08); backdrop-filter: none; box-shadow: 0 4px 12px rgba(15, 23, 42, .06); }
.p2-km-hero .p2-km-tile b { color: var(--km-fg); }
.p2-km-hero .p2-km-tile span { color: var(--km-fg2); }
.p2-km-hero .p2-km-tile--hot { background: var(--km-ink); border-color: var(--km-ink); }
.p2-km-hero .p2-km-tile--hot b, .p2-km-hero .p2-km-tile--hot span { color: #fff; }

/* Câu truyền cảm hứng theo dịp */

/* Đồng hồ đếm ngược */
.p2-km-cd { background: rgba(255, 255, 255, .8); border: 1px solid rgba(15, 23, 42, .08); backdrop-filter: none; box-shadow: 0 8px 22px rgba(15, 23, 42, .08); color: var(--km-fg); }
.p2-km-cd__head { color: var(--km-fg); }
.p2-km-cd__head i, .p2-km-cd__boxes > i { color: var(--km-ink); }
.p2-km-cd__box b { background: var(--km-ink); color: #fff; box-shadow: 0 6px 14px rgba(15, 23, 42, .16), inset 0 -3px 0 rgba(0, 0, 0, .12); }
.p2-km-cd__box span { color: var(--km-fg2); }
.p2-km-cd.is-soon .p2-km-cd__box b { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; }
.p2-km-cd__note { color: var(--km-fg2); }
.p2-km-cd__note b { color: var(--km-ink); }
.p2-km-cd__cta { background: var(--km-ink); color: #fff !important; box-shadow: 0 6px 16px rgba(15, 23, 42, .16); }
.p2-km-cd__cta::before { border-color: var(--km-ink); }

/* Điểm nổi bật */
.p2-km-ticker.is-grid li { background: rgba(255, 255, 255, .76); border: 1px solid rgba(15, 23, 42, .07); color: var(--km-fg); }
.p2-km-ticker.is-grid li:hover { background: #fff; }
.p2-km-ticker.is-grid li i { background: var(--km-ink); color: #fff; }
.p2-km-ticker.is-grid li b { color: var(--km-ink); }
.p2-km-ticker.is-grid li a { color: var(--km-fg); border-bottom-color: rgba(15, 23, 42, .35); }
.p2-km-ticker.is-grid li a:hover { color: var(--km-ink); border-bottom-color: var(--km-ink); }

/* Dải mã giảm giá xoay vòng */
.p2-km-vrot { background: rgba(255, 255, 255, .76); border: 1px solid rgba(15, 23, 42, .08); backdrop-filter: none; color: var(--km-fg); }
.p2-km-vrot__label i { background: var(--km-ink); color: #fff; }
.p2-km-vrot__code { background: #fff; color: var(--km-ink) !important; border-color: var(--km-ink); }
.p2-km-vrot__left { background: rgba(15, 23, 42, .07); }
.p2-km-vrot__left b { color: var(--km-ink); }
.p2-km-vrot__nav button { border-color: rgba(15, 23, 42, .18); background: #fff; color: var(--km-fg2); }
.p2-km-vrot__nav button:hover { background: var(--km-ink); color: #fff; }
.p2-km-vrot__bar { background: var(--km-ink); }
.p2-km-vrot__list li[hidden] { display: none !important; }

/* Khung giảm sâu */
.p2-km-deals { background: rgba(255, 255, 255, .8); border: 1px solid rgba(15, 23, 42, .08); backdrop-filter: none; box-shadow: 0 8px 22px rgba(15, 23, 42, .08); }
.p2-km-deals__head { color: var(--km-fg); }
.p2-km-deals__head i { color: var(--km-ink); }
.p2-km-deals__item { box-shadow: 0 4px 12px rgba(15, 23, 42, .08); border: 1px solid rgba(15, 23, 42, .05); }
/* ===== Chế độ xem thử giao diện ngày lễ (/khuyen-mai?kmpreview=1) + tối ưu độ mượt ===== */

/* Bảng xem thử dạng THANH phía trên hero (không che nội dung) */
/* ===== Hero /khuyen-mai — bản ĐẬM VỪA + ĐIỂM NHẤN MẠNH; trang trí GỌN (ít biểu tượng, to, đặt cố định) ===== */
.p2-km-hero {
    --km-hl: rgba(190, 18, 60, .22); --km-inkshadow: rgba(190, 18, 60, .38); --km-bd: rgba(190, 18, 60, .2);
    border: 1px solid var(--km-bd);
    background:
        radial-gradient(900px 340px at 92% -25%, var(--km-glow), rgba(255, 255, 255, 0) 64%),
        radial-gradient(560px 280px at -6% 118%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
        linear-gradient(125deg, var(--km-1) 0%, var(--km-2) 52%, var(--km-3) 100%);
    box-shadow: 0 18px 40px var(--km-shadow);
}
/* Điểm nhấn: biểu tượng tròn màu đậm, nhãn, tiêu đề có vệt đánh dấu, số liệu nóng, đồng hồ, nút */
.p2-km-hero__icon { background: var(--km-ink); color: #fff; box-shadow: 0 10px 24px var(--km-inkshadow); }
.p2-km-hero__icon::before { border-color: var(--km-ink); }
.p2-km-hero__kicker { box-shadow: 0 6px 14px var(--km-inkshadow); letter-spacing: .1em; }
.p2-km-hero .p2-plp-title {
    display: inline; line-height: 1.4; padding: 0 6px; margin: 0 0 0 -6px;
    background-image: linear-gradient(transparent 60%, var(--km-hl) 60%);
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.p2-km-hero__intro { margin-top: 12px; }
.p2-km-hero .p2-km-tile--hot { box-shadow: 0 10px 22px var(--km-inkshadow); }
.p2-km-hero .p2-km-tile--hot b { font-size: 1.8rem; }
.p2-km-cd { border-color: var(--km-bd); }
.p2-km-cd__box b { box-shadow: 0 8px 18px var(--km-inkshadow), inset 0 -3px 0 rgba(0, 0, 0, .14); }
.p2-km-cd__cta { box-shadow: 0 10px 22px var(--km-inkshadow); }
.p2-km-ticker.is-grid li, .p2-km-vrot, .p2-km-deals { border-color: var(--km-bd); }

/* Trang trí: 4 biểu tượng to ở các góc trống + 1 biểu tượng rất lớn làm nền; chỉ nhấp nhô nhẹ */
/* Dải lướt qua số liệu thật (hero): mỗi lần một dòng, các dòng xếp chồng cùng ô lưới nên chiều cao tự theo dòng dài nhất */
.p2-km-proof { margin-top: 14px; max-width: 640px; }
.p2-km-proof ul { list-style: none; margin: 0; padding: 0; display: grid; }
.p2-km-proof li {
    grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px;
    background: rgba(255, 255, 255, .85); border: 1px solid var(--km-bd, rgba(15, 23, 42, .08)); color: var(--km-fg, #1f2937);
    font-size: 13.5px; font-weight: 600; line-height: 1.4; box-shadow: 0 6px 16px rgba(15, 23, 42, .08);
}
.p2-km-proof li i { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--km-ink, #be123c); color: #fff; }
.p2-km-proof li b { color: var(--km-ink, #be123c); font-variant-numeric: tabular-nums; }
.p2-km-proof:not(.is-js) li:not(:first-child) { display: none; }
.p2-km-proof.is-js li { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.p2-km-proof.is-js li.is-on { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .p2-km-proof.is-js li { transition: none; } }
/* Chữ phụ trong hero đậm hơn một chút để đọc rõ trên nền đỏ/cam đậm vừa */
.p2-km-hero { --km-fg2: #334155; }

/* Lời nhắn theo dịp dưới nhãn: MỘT DÒNG CHỮ nhẹ nhàng — không khung, không viền, không hiệu ứng trang trí */
.p2-km-hero__hook {
    margin: 2px 0 12px; max-width: 62ch; font-size: 15px; line-height: 1.6; font-weight: 600; color: var(--km-inkd, var(--km-ink));
    text-shadow: 0 1px 0 rgba(255, 255, 255, .55); animation: p2kmHookIn .8s ease both;
}
@keyframes p2kmHookIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .p2-km-hero__hook { animation: none; } }
/* Tiêu đề hero: chữ màu theo dịp (cùng kiểu dòng lời nhắn), đậm, rõ, có viền sáng mờ — bỏ vệt đánh dấu cũ */
.p2-km-hero .p2-plp-title {
    display: block; width: auto; padding: 0; margin: 0 0 12px; background: none;
    color: var(--km-inkd, var(--km-ink)) !important; font-weight: 800; letter-spacing: -.01em; line-height: 1.25;
    font-size: clamp(1.65rem, 3vw, 2.45rem);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .85), 0 4px 14px rgba(255, 255, 255, .55);
}
.p2-km-hero__intro { margin-top: 0; }
/* ===== Các khối kính trong hero (đồng hồ, ô số liệu, dải số liệu thật, điểm nổi bật, dải mã, khung giảm sâu): NỀN NHẸ trong hơn, ánh màu theo dịp ===== */
.p2-km-hero { --km-tint: rgba(190, 18, 60, .07); --km-card: linear-gradient(145deg, rgba(255, 255, 255, .56) 0%, rgba(255, 255, 255, .26) 100%); }
.p2-km-cd,
.p2-km-hero .p2-km-tile:not(.p2-km-tile--hot),
.p2-km-proof li,
.p2-km-ticker.is-grid li,
.p2-km-vrot,
.p2-km-deals {
    background: linear-gradient(var(--km-tint), var(--km-tint)), var(--km-card);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}
.p2-km-ticker.is-grid li:hover { background: linear-gradient(var(--km-tint), var(--km-tint)), linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5)); }
/* ===== Đồng hồ đếm ngược — HỘP SỐ nhẹ nhàng: nền trắng mềm, số màu theo dịp (không còn khối đặc màu đậm) ===== */
.p2-km-cd .p2-km-cd__box { width: 64px; }
.p2-km-cd .p2-km-cd__box b {
    height: 56px; line-height: 56px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72));
    color: var(--km-ink); font-size: 1.75rem; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .07), inset 0 0 0 1px rgba(255, 255, 255, .9);
}
.p2-km-cd .p2-km-cd__box:last-of-type b { background: linear-gradient(180deg, rgba(255, 255, 255, .98), var(--km-tint)); }
.p2-km-cd .p2-km-cd__box span { margin-top: 7px; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--km-fg2, #475569); opacity: .85; }
.p2-km-cd .p2-km-cd__boxes > i { color: var(--km-ink); opacity: .45; font-weight: 600; font-size: 1.5rem; line-height: 56px; }
/* Còn dưới 24 giờ: chuyển sang sắc đỏ dịu thay vì khối đỏ đặc */
.p2-km-cd.is-soon .p2-km-cd__box b { background: linear-gradient(180deg, #fff, rgba(254, 226, 226, .85)); color: #dc2626; }
@media (max-width: 575.98px) { .p2-km-cd .p2-km-cd__box { width: 56px; } .p2-km-cd .p2-km-cd__box b { height: 50px; line-height: 50px; font-size: 1.5rem; } .p2-km-cd .p2-km-cd__boxes > i { line-height: 50px; } }
/* ===== Hiệu ứng hộp số đồng hồ: đổi số mượt (trồi lên, nảy nhẹ), dấu ':' thở êm, hộp «giây» thở nhẹ; sắp tới giờ (<24h) chỉ ánh đỏ dịu ===== */
.p2-km-cd .p2-km-cd__box b { transition: box-shadow .3s ease; will-change: transform, opacity; }
.p2-km-cd .p2-km-cd__box b.is-flip { animation: p2kmTick .55s cubic-bezier(.34, 1.4, .64, 1) both; }
.p2-km-cd .p2-km-cd__boxes > i { animation: p2kmColon 1s ease-in-out infinite alternate; }
.p2-km-cd .p2-km-cd__box:last-of-type b { animation: p2kmSoft 2s ease-in-out infinite; }
.p2-km-cd .p2-km-cd__box:last-of-type b.is-flip { animation: p2kmTick .55s cubic-bezier(.34, 1.4, .64, 1) both, p2kmSoft 2s ease-in-out infinite; }
.p2-km-cd.is-soon .p2-km-cd__box b { animation: p2kmSoft 1.8s ease-in-out infinite; }
.p2-km-cd.is-soon .p2-km-cd__box b.is-flip { animation: p2kmTick .55s cubic-bezier(.34, 1.4, .64, 1) both, p2kmSoft 1.8s ease-in-out infinite; }
@keyframes p2kmTick {
    0% { transform: translateY(42%) scale(.94); opacity: 0; }
    55% { transform: translateY(-5%) scale(1.04); opacity: 1; }
    100% { transform: none; opacity: 1; }
}
@keyframes p2kmColon { from { opacity: .22; } to { opacity: .6; } }
@keyframes p2kmSoft {
    0%, 100% { box-shadow: 0 6px 16px rgba(15, 23, 42, .07), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 0 var(--km-tint, rgba(190, 18, 60, .1)); }
    50% { box-shadow: 0 6px 16px rgba(15, 23, 42, .07), inset 0 0 0 1px rgba(255, 255, 255, .9), 0 0 0 6px rgba(255, 255, 255, 0); }
}
/* ===== Ưu đãi theo sản phẩm ở trang chi tiết (.p2vc) — cùng phong cách «Ưu đãi dành riêng cho bạn» của /gio-hang ===== */
.p2vc { margin-top: .85rem }
.p2vc__title { display: flex; align-items: center; margin-bottom: .55rem; font-size: 1rem; font-weight: 800; letter-spacing: .01em; color: #dc2626 }
.p2vc__title i { margin-right: .4rem; font-size: .9em; color: #f97316 }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .p2vc__title {
        background: linear-gradient(100deg, #dc2626 0%, #dc2626 38%, #fda4a4 50%, #dc2626 62%, #dc2626 100%) 0 0 / 250% 100% no-repeat;
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
        animation: p2vcShine 4s ease-in-out infinite;
    }
    .p2vc__title i { -webkit-text-fill-color: #f97316 }
}
@keyframes p2vcShine { 0%, 35% { background-position: 100% 0 } 80%, 100% { background-position: 0 0 } }
@keyframes p2vcIn { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
.p2vc__nudge { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; padding: .6rem .8rem; border-radius: 12px; background: linear-gradient(135deg, #fff7ed, #ffedd5); color: #9a3412; font-size: .88rem; line-height: 1.55; animation: p2vcIn .3s ease-out both }
.p2vc__nudge b { color: #dc2626; font-weight: 800 }
.p2vc__tag { display: inline-block; padding: 0 .55rem; border-radius: 999px; background: #fff; color: #c2410c; font-size: .78rem; font-weight: 700; line-height: 1.5; white-space: nowrap; box-shadow: 0 1px 2px rgba(194, 65, 12, .15) }
.p2vc__add { flex: 0 0 auto; border: 0; border-radius: 999px; padding: .35rem .95rem; background: linear-gradient(135deg, #fb923c, #f97316 50%, #ef4444); color: #fff; font-size: .82rem; font-weight: 800; cursor: pointer; box-shadow: 0 3px 10px rgba(249, 115, 22, .3); transition: transform .2s ease, box-shadow .2s ease }
.p2vc__add:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(239, 68, 68, .3) }
.p2vc__add:active { transform: scale(.96) }
.p2vc__list { display: flex; flex-direction: column; gap: .45rem }
.p2vc__card { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .5rem .65rem; border: 1px solid #fed7aa; border-radius: 12px; background: #fffaf5; text-align: left; cursor: pointer; animation: p2vcIn .3s ease-out both; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease }
.p2vc__card:hover { transform: translateY(-1px); background: #fff7ed; box-shadow: 0 5px 14px rgba(234, 88, 12, .16) }
.p2vc__disc { flex: 0 0 auto; min-width: 3.6rem; padding: .35rem .5rem; border-radius: 10px; background: linear-gradient(135deg, #f97316, #ef4444); color: #fff; font-size: .82rem; font-weight: 800; text-align: center; line-height: 1.25 }
.p2vc__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.35 }
.p2vc__body b { font-size: .86rem; font-weight: 700; color: #7c2d12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.p2vc__body em { font-style: normal; font-size: .78rem; font-weight: 600; color: #16a34a }
.p2vc__code { flex: 0 0 auto; padding: .15rem .6rem; border-radius: 999px; background: #fff; color: #c2410c; font-size: .74rem; font-weight: 800; letter-spacing: .02em; box-shadow: 0 1px 2px rgba(194, 65, 12, .15); transition: background-color .2s ease, color .2s ease }
.p2vc__code.is-done { background: #dcfce7; color: #15803d }
@media (prefers-reduced-motion: reduce) { .p2vc__title, .p2vc__nudge, .p2vc__card { animation: none } }
.p2vc__best { margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; background: #fee2e2; color: #dc2626; font-size: .68rem; font-weight: 800; vertical-align: middle }
.p2vc__top { margin-top: .5rem; font-size: .8rem; font-weight: 700; color: #15803d }
.p2vc__top i { margin-right: .35rem }

/* ===== Sóng đáy thanh trên (Site.Master .p2-topbar-wave): 3 lớp sóng NGẮN, nhịp khác nhau, trôi ngược chiều — sinh động hơn bản 1 lớp rộng + chậm ===== */
/* Sóng thấp hơn bản gốc để KHÔNG che/lấp phần nền hồng của thanh; chiều cao thanh giữ như gốc (padding đáy 10px) */
.mt-top-bar .p2-topbar-wave {
    height: clamp(12px, 1.4vw, 16px);
}
.mt-top-bar .p2-topbar-wave::before,
.mt-top-bar .p2-topbar-wave::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: repeat-x;
    background-position: 0 100%;
    will-change: background-position;
}
/* lớp sau: mờ, sóng dài, trôi chậm sang phải */
.mt-top-bar .p2-topbar-wave::before {
    z-index: 0;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.35' d='M0,12 C30,0 70,0 100,12 S170,24 200,12 L200,24 L0,24 Z'/%3E%3C/svg%3E");
    background-size: 380px 100%;
    animation: p2tbWaveA 20s linear infinite;
}
/* lớp giữa: mờ vừa, sóng ngắn hơn, trôi sang trái nhanh hơn */
.mt-top-bar .p2-topbar-wave::after {
    z-index: 1;
    height: 82%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' fill-opacity='.6' d='M0,12 C30,0 70,0 100,12 S170,24 200,12 L200,24 L0,24 Z'/%3E%3C/svg%3E");
    background-size: 270px 100%;
    animation: p2tbWaveB 14s linear infinite;
}
/* lớp trước: trắng đặc nối liền phần thân trắng của header, sóng ngắn nhất */
.mt-top-bar .p2-topbar-wave svg {
    z-index: 2;
    width: 100%;
    height: 62%;
    animation: p2tbWaveC 10s linear infinite;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,12 C30,0 70,0 100,12 S170,24 200,12 L200,24 L0,24 Z'/%3E%3C/svg%3E") repeat-x 0 100% / 200px 100%;
}
.mt-top-bar .p2-topbar-wave svg path { display: none }
@keyframes p2tbWaveA { from { background-position: 0 100% } to { background-position: 380px 100% } }
@keyframes p2tbWaveB { from { background-position: 0 100% } to { background-position: -270px 100% } }
@keyframes p2tbWaveC { from { background-position: 0 100% } to { background-position: 200px 100% } }
@media (prefers-reduced-motion: reduce) {
    .mt-top-bar .p2-topbar-wave::before,
    .mt-top-bar .p2-topbar-wave::after,
    .mt-top-bar .p2-topbar-wave svg { animation: none !important }
}

/* ===== Phương án «Nền hồng lụa chuyển màu + đường cong mềm» (thay sóng trôi) — muốn quay lại sóng trôi: xóa nguyên khối này ===== */
/* nền thanh trên: dải hồng chuyển sắc rất chậm, như lụa đổi ánh */
.mt-top-bar {
    background: linear-gradient(115deg, #eb2784 0%, #f43f9e 22%, #f80fa8 45%, #d6257f 70%, #eb2784 100%);
    background-size: 300% 100%;
    animation: p2tbFlow 22s ease-in-out infinite alternate;
}
/* đường cong dưới: 1 đường uốn nhẹ đứng yên (không trôi) + 1 lớp mờ phía sau "thở" nhẹ */
.mt-top-bar .p2-topbar-wave::before { display: none }
.mt-top-bar .p2-topbar-wave::after {
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,10 L0,3 Q25,-1 50,3 T100,3 L100,10 Z'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: .45;
    animation: p2tbBreathe 7s ease-in-out infinite;
    will-change: opacity;
}
.mt-top-bar .p2-topbar-wave svg {
    height: 62%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0,10 L0,5 Q25,1 50,5 T100,5 L100,10 Z'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 100%;
    animation: none;
}
@keyframes p2tbFlow { from { background-position: 0 0 } to { background-position: 100% 0 } }
@keyframes p2tbBreathe { 0%, 100% { opacity: .3 } 50% { opacity: .65 } }
@media (prefers-reduced-motion: reduce) {
    .mt-top-bar, .mt-top-bar .p2-topbar-wave::after { animation: none !important }
}