/* =========================================================================
   SKIN V2 "SOFT PREMIUM" cho SHOPCLONE7 (client)
   - Lớp CSS đè lên skin-dark.css, KHÔNG sửa HTML/PHP.
   - Mềm mại: font Plus Jakarta Sans, bo tròn 18px, thẻ kính (glass), bóng mờ.
   - Bố trí lại thẻ sản phẩm bằng CSS grid: tên + chip + mô tả bên trái,
     giá + nút bên phải (mobile tự xếp dọc lại).
   - Nạp SAU mod/css/skin-dark.css trong views/client/header.php
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --v2-bg: #0a0d18;
    --v2-bg2: #0e1220;
    --v2-card: rgba(255, 255, 255, 0.035);
    --v2-card-solid: #131829;
    --v2-card2: rgba(255, 255, 255, 0.06);
    --v2-card3: rgba(255, 255, 255, 0.09);
    --v2-line: rgba(255, 255, 255, 0.07);
    --v2-line2: rgba(255, 255, 255, 0.14);
    --v2-head: #f5f7fb;
    --v2-text: #cfd6e4;
    --v2-muted: #8d97ad;
    --v2-rose: #ff5470;
    --v2-coral: #ff8a5b;
    --v2-amber: #ffb648;
    --v2-cyan: #4fd1e8;
    --v2-violet: #b39dfb;
    --v2-green: #4ade80;
    --v2-grad: linear-gradient(120deg, var(--v2-rose) 0%, var(--v2-coral) 100%);
    --v2-grad2: linear-gradient(120deg, var(--v2-coral) 0%, var(--v2-amber) 100%);
    --v2-r: 18px;
    --v2-r-sm: 12px;
    --v2-font: "Plus Jakarta Sans", "Be Vietnam Pro", system-ui, sans-serif;
    --v2-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);

    /* đè biến của skin-dark */
    --sk-bg: var(--v2-bg);
    --sk-bg2: var(--v2-bg2);
    --sk-card: var(--v2-card-solid);
    --sk-card2: #171d31;
    --sk-card3: #1d2440;
    --sk-border: var(--v2-line);
    --sk-border2: var(--v2-line2);
    --sk-heading: var(--v2-head);
    --sk-text: var(--v2-text);
    --sk-muted: var(--v2-muted);
    --sk-accent: var(--v2-rose);
    --sk-accent2: var(--v2-coral);
    --sk-grad: var(--v2-grad);
    --sk-radius: var(--v2-r);
}

/* ---------- nền & chữ ---------- */
html, body, button, input, select, textarea { font-family: var(--v2-font) !important; }
body {
    background:
        radial-gradient(1100px 600px at 8% -10%, rgba(255, 84, 112, 0.16), transparent 60%),
        radial-gradient(900px 520px at 100% 0%, rgba(255, 138, 91, 0.12), transparent 55%),
        radial-gradient(700px 500px at 50% 110%, rgba(79, 209, 232, 0.08), transparent 60%),
        var(--v2-bg) !important;
    background-attachment: fixed !important;
    color: var(--v2-text);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--v2-font); letter-spacing: -.2px; }

/* ---------- thanh trên cùng ---------- */
.header-top { background: transparent; border-bottom: 1px solid var(--v2-line); }
.header-top-welcome p, .header-top-list li a { color: var(--v2-muted); font-size: 12.5px; }
.header-top-list li a:hover { color: var(--v2-head); }

/* ---------- header ---------- */
.header-part, .header-part.active {
    background: rgba(10, 13, 24, 0.72);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--v2-line);
    box-shadow: none;
}
.header-logo img { filter: drop-shadow(0 6px 18px rgba(255, 84, 112, 0.35)); }
.header-form, .header-part.active .header-form {
    background: var(--v2-card2);
    border: 1px solid var(--v2-line2);
    border-radius: 999px;
    clip-path: none;
    height: 48px;
    transition: all .25s ease;
}
.header-form:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 138, 91, 0.6);
    box-shadow: 0 0 0 4px rgba(255, 138, 91, 0.15);
}
.header-form input { color: var(--v2-head); font-size: 14px; }
.header-form input::placeholder { color: var(--v2-muted); }
.header-form button i { color: var(--v2-coral); }
.header-widget, .header-part.active .header-widget {
    background: var(--v2-card2) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: 50%;
    transition: all .2s ease;
}
.header-widget:hover { background: var(--v2-card3) !important; border-color: var(--v2-line2) !important; transform: translateY(-1px); }
.header-widget i, .header-user i, .header-src i { color: var(--v2-head) !important; }
.header-widget sup, .header-part.active .header-widget sup {
    background: var(--v2-grad);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(255, 84, 112, 0.5);
}
.header-widget img, .header-user img {
    border: 2px solid rgba(255, 138, 91, 0.8);
    box-shadow: 0 0 0 3px rgba(255, 138, 91, 0.18);
}
.header-widget span { color: var(--v2-head) !important; font-weight: 700; }
.header-widget span small { color: var(--v2-amber) !important; font-weight: 700; }

/* ---------- menu chính: thanh viên thuốc, không tràn ---------- */
.navbar-part { background: transparent; border-bottom: 0; position: relative; }
.navbar-part::after { display: none; }
.navbar-content {
    border-top: 0 !important;
    flex-wrap: nowrap;
    gap: 18px;
    padding: 10px 0 14px;
}
.navbar-list { gap: 2px; }
.navbar-list > li { margin: 0 !important; }
.navbar-link {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px !important;
    border-radius: 999px;
    color: var(--v2-muted);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition: all .2s ease;
}
.navbar-link::after { display: none !important; }
.navbar-link i { margin-left: 6px; font-size: 11px; opacity: .7; }
.navbar-link:hover { color: var(--v2-head); background: var(--v2-card2); }
.navbar-link.active { color: var(--v2-head); background: var(--v2-card3); box-shadow: inset 0 0 0 1px var(--v2-line2); }
.navbar-info-group { flex-shrink: 0; }
.navbar-info { margin-right: 14px !important; }
.navbar-info i {
    font-size: 18px !important;
    width: 28px; height: 28px;
    margin-right: 10px !important;
    display: inline-flex; align-items: center; justify-content: center;
    background: none !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--v2-coral);
    clip-path: none;
    box-shadow: none;
}
.navbar-info p small { font-size: 11px !important; line-height: 13px !important; color: var(--v2-muted); }
.navbar-info p span { font-size: 13px !important; font-weight: 600; color: var(--v2-head); white-space: nowrap; }
.megamenu, .dropdown-menu, .navbar-dropdown ul, .dropdown-list {
    background: rgba(19, 24, 41, 0.96) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--v2-line2) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55) !important;
    padding: 8px !important;
}
.dropdown-list li a, .megamenu a, .dropdown-menu a { border-radius: 10px; }

/* ---------- thông báo đầu trang ---------- */
.feature-part .account-card.pt-3 {
    background: linear-gradient(90deg, rgba(255, 182, 72, 0.12), rgba(255, 182, 72, 0.02)) !important;
    border: 1px solid rgba(255, 182, 72, 0.28) !important;
    border-radius: var(--v2-r) !important;
    clip-path: none;
    padding: 16px 22px 16px 24px !important;
    position: relative;
    box-shadow: none !important;
}
.feature-part .account-card.pt-3::before {
    content: "";
    position: absolute;
    left: 0; top: 14px; bottom: 14px; width: 4px;
    border-radius: 4px;
    background: var(--v2-grad2);
}
.feature-part .account-card.pt-3 h4 { font-weight: 500; font-size: 14px; color: var(--v2-text); margin: 0; }

/* ---------- ô công cụ miễn phí ---------- */
.box-product-main {
    border-radius: var(--v2-r) !important;
    clip-path: none;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: var(--v2-shadow) !important;
    transition: transform .25s ease, box-shadow .25s ease;
}
.box-product-main::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 50%);
    pointer-events: none;
}
.box-product-main::after { background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.35)); }
.box-product-main:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5) !important; }
.box-img-product img { border-radius: 14px; clip-path: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); }
.box-text-style h5, .box-text-style h6 { font-weight: 700; }

/* ---------- nút chuyên mục: viên thuốc mềm ---------- */
.custom-button-list { gap: 8px 8px; }
.btn-category-home {
    background: var(--v2-card2);
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    clip-path: none;
    color: var(--v2-text);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    padding: 9px 16px 9px 10px;
    transition: all .2s ease;
}
.btn-category-home img { border-radius: 50%; width: 24px !important; height: 24px; object-fit: cover; }
.btn-category-home i { color: var(--v2-coral); }
.btn-category-home:hover { background: var(--v2-card3); border-color: var(--v2-line2); color: var(--v2-head); transform: translateY(-1px); }
.btn-category-home.active {
    background: var(--v2-grad);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 22px rgba(255, 84, 112, 0.35);
}
.btn-category-home.active i { color: #fff; }
.skeleton-category-btn { border-radius: 999px; clip-path: none; }

/* ---------- tiêu đề nhóm ---------- */
html body .home-heading { margin: 34px 0 16px !important; }
html body .home-heading::after { display: none !important; }
html body #products-container .row > div:nth-of-type(n) .home-heading.mb-3 h3:not(.no-bg),
html body .row > .col-lg-6:nth-of-type(n) .home-heading.mb-3 h3:not(.no-bg),
html body .home-heading.mb-3 h3:not(.no-bg) {
    background: none !important;
    background-image: none !important;
    background-size: auto !important;
    animation: none !important;
    clip-path: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    width: 100% !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0 0 12px 0 !important;
    color: var(--v2-head) !important;
    font-size: 18px !important;
    font-weight: 800;
    letter-spacing: -.2px;
    text-transform: none;
    border-bottom: 1px solid var(--v2-line);
    position: relative;
}
html body .home-heading.mb-3 h3:not(.no-bg)::after {
    content: "";
    animation: none !important;
    transform: none !important;
    position: absolute;
    top: auto !important; left: 0 !important; bottom: -1px !important;
    width: 72px !important; height: 2px !important;
    border-radius: 2px;
    background: var(--v2-grad) !important;
    box-shadow: 0 0 12px rgba(255, 84, 112, 0.6);
}
html body .home-heading h3 img {
    width: 36px !important; height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    clip-path: none;
    background: var(--v2-card3) !important;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
html body .home-heading h3 i { color: var(--v2-coral); }

/* ---------- thẻ sản phẩm: bố trí lại bằng grid ---------- */
html body .feature-card {
    background: var(--v2-card) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: var(--v2-r) !important;
    clip-path: none;
    box-shadow: none !important;
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
html body .feature-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 45%);
    pointer-events: none;
    display: block;
    opacity: 1;
    width: auto; height: auto; left: 0; top: 0;
}
html body .feature-card::after {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 138, 91, 0.16), transparent 70%);
    pointer-events: none;
    transition: transform .35s ease;
}
html body .feature-card:hover {
    transform: translateY(-3px);
    background: var(--v2-card2) !important;
    border-color: rgba(255, 138, 91, 0.45) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 138, 91, 0.15) !important;
}
html body .feature-card:hover::after { transform: scale(1.5); }

/* bố cục trong thẻ: tên / chip / mô tả full dòng, hàng cuối = giá bên trái + nút bên phải */
#products-container .feature-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "name  name"
        "chips chips"
        "desc  desc"
        "price btns";
    column-gap: 14px;
    row-gap: 6px;
    align-items: start;
    position: relative;
    z-index: 1;
    border-left: 0;
}
#products-container .feature-content > .feature-name { grid-area: name; margin: 0; }
#products-container .feature-content > div.row:first-of-type { grid-area: chips; margin: 0; }
#products-container .feature-content > div.row:first-of-type > div { padding: 0; }
#products-container .feature-content > .feature-desc { grid-area: desc; margin: 0; }
#products-container .feature-content > .feature-price { grid-area: price; margin: 10px 0 0; align-self: center; }
#products-container .feature-content > div.row:last-of-type { grid-area: btns; margin: 10px 0 0; align-self: center; display: flex; flex-direction: row; gap: 8px; }
#products-container .feature-content > div.row:last-of-type > .col { padding: 0; flex: 0 0 auto; width: auto; }
#products-container .feature-content > div.row:last-of-type .btn-more { min-width: 96px; padding: 0 16px; }
#products-container .feature-content > div.row:last-of-type .btn-buy { min-width: 118px; width: auto; }

.feature-name a {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.4;
    color: var(--v2-head);
    text-transform: none;
    transition: color .2s;
}
.feature-name a:hover { color: var(--v2-amber); }
.label-text {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 4px 10px;
    border-radius: 999px;
    clip-path: none;
    background: var(--v2-card2);
    border: 1px solid var(--v2-line);
    color: var(--v2-muted);
    margin: 2px 6px 0 0;
}
.label-text b { font-weight: 700; color: var(--v2-head); }
.label-text.feat { background: rgba(79, 209, 232, 0.1); border-color: rgba(79, 209, 232, 0.25); color: #a9e8f3; }
.label-text.feat b { color: var(--v2-cyan); }
.label-text.order { background: rgba(179, 157, 251, 0.1); border-color: rgba(179, 157, 251, 0.25); color: #d3c7ff; }
.label-text.order b { color: var(--v2-violet); }
.label-text.off { background: rgba(255, 84, 112, 0.12); border-color: rgba(255, 84, 112, 0.3); color: #ffb3c0; }

html body #products-container .feature-price span,
html body .feature-price span {
    display: inline-block;
    font-weight: 800;
    font-size: 24px;
    letter-spacing: -.5px;
    background: var(--v2-grad2) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none;
    line-height: 1.1;
}
html body .feature-price del {
    -webkit-text-fill-color: var(--v2-muted);
    color: var(--v2-muted) !important;
    background: none !important;
    font-size: 12.5px;
    font-weight: 500;
    margin-left: 6px;
}
.feature-desc { color: var(--v2-muted); font-size: 12.5px; line-height: 1.5; }
.feature-desc i { color: var(--v2-coral); font-size: 11px; }

/* nút trong thẻ */
.btn-more {
    display: flex; align-items: center; justify-content: center;
    height: 40px;
    border: 1px solid var(--v2-line2) !important;
    border-radius: var(--v2-r-sm) !important;
    clip-path: none;
    background: var(--v2-card2) !important;
    color: var(--v2-head) !important;
    font-weight: 600;
    font-size: 13px;
    transition: all .2s ease;
}
.btn-more:hover { background: var(--v2-card3) !important; border-color: rgba(255, 255, 255, 0.25) !important; }
.btn-buy, .buy-btn-box4, .btn-custom-available, .btn-inline, .wallet-form button, button.btn-primary, a.btn-primary, .btn-primary {
    border-radius: var(--v2-r-sm) !important;
    clip-path: none;
    font-family: var(--v2-font);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .2px;
    text-transform: none;
    box-shadow: 0 8px 22px rgba(255, 84, 112, 0.35);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-buy { height: 40px; padding: 0 14px; }
.btn-buy::after, .btn-primary::after, .btn-inline::after {
    content: "";
    position: absolute; top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left .5s ease;
}
.btn-buy:hover::after, .btn-primary:hover::after, .btn-inline:hover::after { left: 130%; }
.btn-buy:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(255, 84, 112, 0.45); }
.btn-custom-sold, .buy-btn-box4.disabled, .btn-secondary { border-radius: var(--v2-r-sm) !important; clip-path: none; }
.product-disable::before { border-radius: 0 0 var(--v2-r) var(--v2-r); }

/* nút "Xem thêm" */
html body .btn-more-new {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px !important;
    background: var(--v2-card2) !important;
    border: 1px solid var(--v2-line2) !important;
    border-radius: 999px !important;
    clip-path: none;
    color: var(--v2-head) !important;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    transition: all .2s ease;
}
html body .btn-more-new::after { content: "→"; color: var(--v2-coral); transition: transform .2s; }
html body .btn-more-new:hover { background: var(--v2-card3) !important; border-color: rgba(255, 138, 91, 0.5) !important; }
html body .btn-more-new:hover::after { transform: translateX(3px); }

/* ---------- cột ví bên phải ---------- */
.col-xl-3 > .account-card { position: sticky; top: 16px; }
.card-wallet-home {
    background:
        radial-gradient(240px 160px at 100% 0%, rgba(255, 138, 91, 0.28), transparent 70%),
        radial-gradient(200px 160px at 0% 100%, rgba(255, 84, 112, 0.2), transparent 70%),
        var(--v2-card-solid) !important;
    border: 1px solid var(--v2-line2) !important;
    border-radius: 22px !important;
    clip-path: none;
    position: relative;
    overflow: hidden;
    box-shadow: var(--v2-shadow) !important;
}
.card-wallet-home::before, .card-wallet-home::after { display: none; }
.my-wallet p {
    color: var(--v2-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.my-wallet h3 {
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -1px;
    background: var(--v2-grad2);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
}
.wallet-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--v2-line) !important;
    border-radius: 14px !important;
    clip-path: none;
    padding: 14px 16px !important;
    position: relative; z-index: 1;
    transition: all .2s ease;
}
.wallet-card p { color: var(--v2-muted); font-size: 12px; text-transform: none; letter-spacing: 0; }
.wallet-card h3 { font-weight: 700; font-size: 20px; color: var(--v2-head); }
.wallet-card:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: var(--v2-line2) !important; }
.user-form-social li a {
    border-radius: var(--v2-r-sm) !important;
    clip-path: none;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0;
}
.user-form-social li a.facebook { background: var(--v2-card3) !important; border: 1px solid var(--v2-line2); }
.user-form-social li a.google { background: var(--v2-grad) !important; box-shadow: 0 8px 22px rgba(255, 84, 112, 0.35); }

/* ---------- đơn hàng / nạp tiền gần đây: dạng feed ---------- */
html body .home-heading + div .feature-card {
    padding: 12px 16px !important;
    margin-bottom: 8px !important;
    border-left: 1px solid var(--v2-line) !important;
    border-radius: 14px !important;
}
html body .home-heading + div .feature-card::before { display: block; }
.home-heading + div .feature-content { display: block; }
.badge.bg-primary {
    background: var(--v2-card2) !important;
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    clip-path: none;
    color: var(--v2-muted) !important;
    font-weight: 500;
    font-size: 11px;
    padding: 5px 9px;
}
.feature-content b, .feature-content strong { color: var(--v2-amber); }

/* ---------- menu nổi bên phải ---------- */
.menu-item, .fixed-menu a, .side-menu a {
    border-radius: 14px !important;
    clip-path: none;
    background: rgba(19, 24, 41, 0.9) !important;
    border: 1px solid var(--v2-line2) !important;
    backdrop-filter: blur(10px);
}
.menu-item.active, .menu-item:hover { border-color: rgba(255, 138, 91, 0.6) !important; box-shadow: 0 0 18px rgba(255, 138, 91, 0.3); }

/* ---------- footer ---------- */
.footer-part {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35)) !important;
    border-top: 1px solid var(--v2-line);
    position: relative;
}
.footer-part::before {
    content: "";
    position: absolute; left: 50%; top: -1px;
    width: 40%; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--v2-rose), var(--v2-coral), transparent);
}
.footer-title, .footer-widget h3 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--v2-head);
}
.footer-title::after, .footer-widget h3::after { background: var(--v2-grad); width: 28px; height: 2px; border-radius: 2px; }
.footer-widget p, .footer-contact li p, .footer-contact li a, .footer-links a, .footer-links li a { color: var(--v2-muted); }
.footer-links a:hover, .footer-links li a:hover, .footer-contact li a:hover { color: var(--v2-head); }
.footer-contact li i {
    background: var(--v2-card2);
    border: 1px solid var(--v2-line);
    color: var(--v2-coral);
    border-radius: 12px;
    clip-path: none;
}
.footer-bottom, .footer-end { background: rgba(0, 0, 0, 0.3) !important; border-top: 1px solid var(--v2-line); border-radius: 14px; }

/* ---------- modal ---------- */
.modal-content {
    background: rgba(19, 24, 41, 0.97) !important;
    backdrop-filter: blur(16px);
    border: 1px solid var(--v2-line2) !important;
    border-radius: 20px !important;
    clip-path: none;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.modal-header, .modal-footer { border-color: var(--v2-line) !important; }
.modal-title { font-weight: 700; font-size: 15px; }
.btn-danger { border-radius: var(--v2-r-sm) !important; clip-path: none; background: var(--v2-grad) !important; border: 0 !important; font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
    #products-container .feature-content > .feature-price { margin-top: 6px; }
    #products-container .feature-content > div.row:last-of-type { margin-top: 6px; }
    #products-container .feature-content > div.row:last-of-type .btn-more { min-width: 0; padding: 0 12px; }
    #products-container .feature-content > div.row:last-of-type .btn-buy { min-width: 0; padding: 0 12px; }
    html body .feature-card { padding: 16px !important; }
    .feature-name a { font-size: 14px; }
    html body .feature-price span { font-size: 21px; }
    html body .home-heading.mb-3 h3:not(.no-bg) { font-size: 16px !important; }
    .my-wallet h3 { font-size: 30px; }
    .btn-category-home { padding: 8px 14px 8px 8px; font-size: 12.5px; }
    .feature-part .account-card.pt-3 { padding: 14px 16px 14px 20px !important; }
}

/* mũi tên dropdown trên menu: cách chữ ra, nhỏ lại */
.navbar-link.dropdown-arrow { padding-right: 28px !important; }
.navbar-link.dropdown-arrow::before { right: 11px; font-size: 12px; line-height: 12px; opacity: .7; color: inherit; }

/* =========================================================
   HEADER V2: thanh trên mỏng, chip người dùng, menu kính nổi
   ========================================================= */
.header-top .container { min-height: 0; }
.header-top-welcome p { font-size: 12px; }
.header-top-list li a { font-size: 12px; }

/* nhóm icon bên phải: chip tròn đều nhau */
.header-widget-group .header-widget { margin-left: 10px !important; }
.header-widget-group .header-widget:not(:has(img)) {
    width: 42px; height: 42px;
    border-radius: 50%;
}
.header-widget-group .header-widget:not(:has(img)) i { font-size: 15px; }
.header-widget sup { top: -3px; left: auto; right: -3px; min-width: 18px; height: 18px; line-height: 18px; font-size: 10.5px; }

/* chip người dùng (đã đăng nhập) */
.header-widget:has(.hd-user), .header-part.active .header-widget:has(.hd-user) {
    height: 44px;
    padding: 0 14px 0 4px !important;
    border-radius: 999px !important;
    gap: 10px;
    background: linear-gradient(90deg, rgba(255, 84, 112, 0.14), rgba(255, 138, 91, 0.08)) !important;
    border: 1px solid rgba(255, 138, 91, 0.35) !important;
}
.header-widget .hd-user { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.header-widget .hd-user p { margin: 0; }
.header-widget .hd-name { font-size: 12.5px; font-weight: 700; color: var(--v2-head) !important; letter-spacing: .2px; text-transform: uppercase; }
.header-widget .hd-balance { font-size: 12.5px; font-weight: 800; color: var(--v2-amber) !important; }
.header-widget .hd-balance i { font-size: 10px; margin-right: 2px; opacity: .8; }
.header-widget:has(.hd-user) img { width: 34px; height: 34px; border-width: 2px; box-shadow: none; }
/* nút Login (chưa đăng nhập) */
.header-widget[title="Login"], .header-part.active .header-widget[title="Login"] {
    height: 44px; padding: 0 16px 0 4px !important; border-radius: 999px !important; gap: 8px;
    background: var(--v2-grad) !important; border: 0 !important;
    box-shadow: 0 8px 22px rgba(255, 84, 112, 0.35);
}
.header-widget[title="Login"] span { color: #fff !important; font-weight: 700; font-size: 13px; }
.header-widget[title="Login"] img { width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, 0.7); box-shadow: none; }

/* thanh menu: khối kính nổi */
.navbar-part { padding: 8px 0 2px; }
.navbar-part .navbar-content {
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid var(--v2-line);
    border-radius: 999px;
    padding: 6px 8px 6px 6px;
    gap: 12px;
    backdrop-filter: blur(10px);
}
.navbar-link { padding: 8px 14px !important; font-size: 13px; }
.navbar-link.active { background: var(--v2-grad); color: #fff; box-shadow: 0 6px 16px rgba(255, 84, 112, 0.3); }
.navbar-link.dropdown-arrow { padding-right: 30px !important; }
.navbar-link.dropdown-arrow::before { right: 12px; }
/* hỗ trợ bên phải: viên thuốc mềm */
.navbar-info-group { gap: 6px; }
.navbar-info.hd-support, .navbar-info.hd-support:hover {
    margin: 0 !important;
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 14px 0 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--v2-line);
    transition: all .2s;
}
.navbar-info.hd-support:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 138, 91, 0.45); }
.navbar-info.hd-support i { width: auto; height: auto; margin: 0 !important; font-size: 14px !important; }
.navbar-info.hd-support p { display: flex; flex-direction: column; margin: 0; line-height: 1.1; }
.navbar-info.hd-support p small { font-size: 10px !important; letter-spacing: .6px; text-transform: uppercase; }
.navbar-info.hd-support p span { font-size: 12.5px !important; }
@media (max-width: 991px) { .navbar-part { display: none; } }

/* fix chip người dùng: icon ví nhỏ, 2 dòng xếp gọn */
.header-widget .hd-user, .header-part.active .header-widget .hd-user {
    display: flex !important; flex-direction: column; justify-content: center;
    margin: 0 !important; padding: 0 !important; line-height: 1.15;
    position: static !important; transform: none !important;
}
.header-widget .hd-user p, .header-widget .hd-user p.hd-name, .header-widget .hd-user p.hd-balance {
    margin: 0 !important; padding: 0 !important; line-height: 1.2 !important; display: block;
}
.header-widget .hd-user .hd-balance i {
    width: auto !important; height: auto !important; line-height: 1 !important;
    display: inline !important; font-size: 10px !important; border-radius: 0; background: none !important;
    color: var(--v2-amber) !important;
}
.header-widget:has(.hd-user) { align-items: center !important; }

/* nút Discord hỗ trợ trên thanh menu: theo màu chủ đạo (đỏ -> cam) */
.navbar-info.hd-discord, .navbar-info.hd-discord:hover {
    background: linear-gradient(90deg, rgba(255, 84, 112, 0.18), rgba(255, 138, 91, 0.12));
    border-color: rgba(255, 138, 91, 0.45);
}
.navbar-info.hd-discord:hover { background: var(--v2-grad); border-color: transparent; box-shadow: 0 8px 20px rgba(255, 84, 112, 0.35); }
.navbar-info.hd-discord i { color: var(--v2-coral) !important; font-size: 17px !important; }
.navbar-info.hd-discord p small { color: #ffb69b; }
.navbar-info.hd-discord:hover i, .navbar-info.hd-discord:hover p small, .navbar-info.hd-discord:hover p span { color: #fff !important; }

/* menu thả xuống phải nổi TRÊN nội dung (không bị thẻ sản phẩm che) */
.header-part { position: relative; z-index: 1002; }
.navbar-part { position: relative; z-index: 1001; }
.navbar-part .navbar-content, .navbar-part .navbar-list, .navbar-part .navbar-item { overflow: visible; }
.navbar-part .dropdown-list, .navbar-part .megamenu, .navbar-part .dropdown-menu { z-index: 1050 !important; background: #131829 !important; }
.feature-part, #products-container, .feature-card { z-index: auto; }

/* dropdown: kéo sát thanh menu + cầu nối hover để không bị tắt khi rê chuột xuống */
.navbar-part .navbar-item { position: relative; }
.navbar-part .navbar-item.dropdown::after, .navbar-part .navbar-item.dropdown-megamenu::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px;
}
.navbar-part .dropdown:hover .dropdown-position-list { top: calc(100% + 12px) !important; }
.navbar-part .dropdown-position-list { top: calc(100% + 24px); }
.navbar-part .dropdown-megamenu:hover .megamenu, .navbar-part .megamenu { top: calc(100% + 12px) !important; }
.navbar-part .dropdown-position-list::before { background: #131829; border-color: rgba(255, 255, 255, 0.14); }
.navbar-part .dropdown-position-list li a, .navbar-part .dropdown-list li a { background: transparent; color: var(--v2-text); }
.navbar-part .dropdown-position-list li a:hover, .navbar-part .dropdown-list li a:hover { background: rgba(255, 255, 255, 0.06); color: var(--v2-head); }
/* chỉnh lại: dropdown thường sát link hơn, megamenu bám theo thanh menu */
.navbar-part .navbar-item.dropdown::after { height: 30px; }
.navbar-part .dropdown:hover .dropdown-position-list { top: calc(100% + 6px) !important; }
.navbar-part .navbar-item.dropdown-megamenu { position: static; }
.navbar-part .dropdown-megamenu:hover .megamenu, .navbar-part .megamenu { top: calc(100% - 10px) !important; left: 0 !important; right: 0 !important; width: auto !important; }
.navbar-part .megamenu { transform: none !important; margin: 0 !important; max-width: none !important; }

/* =========================================================
   TRANG NẠP TIỀN: đổi sang tông tối, mềm
   ========================================================= */
/* --- crypto --- */
html body .crypto-form-card { background: var(--v2-card-solid) !important; border: 1px solid var(--v2-line2) !important; border-radius: var(--v2-r) !important; padding: 0 !important; box-shadow: var(--v2-shadow) !important; overflow: hidden; }
html body .crypto-form-card::before { display: none; }
html body .crypto-form-inner { background: transparent !important; border-radius: 0 !important; padding: 26px 26px 24px !important; }
html body .crypto-logo-box { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--v2-line) !important; border-radius: 14px !important; box-shadow: none !important; padding: 10px 18px !important; }
html body .crypto-logo-box img { filter: brightness(1.1); }
html body .crypto-form-inner h4, html body .crypto-form-inner h5, html body .crypto-form-inner h3 { color: var(--v2-head) !important; font-weight: 800; font-size: 16px; text-transform: none; }
html body .crypto-input-label { color: var(--v2-text) !important; font-weight: 600; font-size: 13.5px; }
html body .crypto-input-label i { color: var(--v2-coral) !important; }
html body .crypto-input-field { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--v2-line2) !important; border-radius: var(--v2-r-sm) !important; color: var(--v2-head) !important; height: 48px; font-size: 15px; }
html body .crypto-input-field::placeholder { color: var(--v2-muted); }
html body .crypto-input-field:focus { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 138, 91, 0.7) !important; box-shadow: 0 0 0 4px rgba(255, 138, 91, 0.14) !important; }
html body .crypto-input-field:disabled, html body .crypto-input-field[readonly] { background: rgba(255, 255, 255, 0.03) !important; color: var(--v2-muted) !important; }
html body .crypto-rate-box { background: rgba(74, 222, 128, 0.08) !important; border: 1px solid rgba(74, 222, 128, 0.25) !important; border-radius: var(--v2-r-sm) !important; box-shadow: none !important; padding: 12px 16px !important; }
html body .crypto-rate-box i { color: rgba(74, 222, 128, 0.6) !important; }
html body .crypto-rate-text { color: #9ff0bf !important; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
html body .crypto-rate-value { color: var(--v2-head) !important; font-weight: 800; font-size: 16px; }
html body .crypto-received-box { background: rgba(255, 182, 72, 0.08) !important; border: 1px solid rgba(255, 182, 72, 0.3) !important; border-radius: var(--v2-r-sm) !important; box-shadow: none !important; padding: 12px 14px !important; }
html body .crypto-received-label { color: #ffd28a !important; font-weight: 600; font-size: 12.5px; }
html body .crypto-received-label i { color: var(--v2-amber) !important; }
html body .crypto-received-amount { background: rgba(0, 0, 0, 0.25) !important; border: 1px solid rgba(255, 182, 72, 0.25) !important; border-radius: 10px !important; box-shadow: none !important; font-weight: 800; font-size: 22px; letter-spacing: -.3px; color: var(--v2-amber) !important; }
html body .crypto-info-box { background: rgba(79, 209, 232, 0.08) !important; border: 1px solid rgba(79, 209, 232, 0.25) !important; border-left-width: 3px !important; border-radius: var(--v2-r-sm) !important; box-shadow: none !important; }
html body .crypto-info-text { color: #b6ecf6 !important; font-size: 13px; }
html body .crypto-info-text i { color: var(--v2-cyan) !important; }
html body .crypto-submit-btn { background: var(--v2-grad) !important; border: 0 !important; border-radius: 14px !important; height: 52px; font-weight: 800; font-size: 14px; letter-spacing: .3px; text-transform: none; box-shadow: 0 10px 26px rgba(255, 84, 112, 0.35) !important; color: #fff !important; }
html body .crypto-submit-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* --- ngân hàng --- */
html body .bank-card { background: var(--v2-card-solid) !important; border: 1px solid var(--v2-line2) !important; border-radius: var(--v2-r) !important; box-shadow: var(--v2-shadow) !important; overflow: hidden; }
html body .bank-card:hover { transform: none; box-shadow: var(--v2-shadow) !important; border-color: rgba(255, 138, 91, 0.45) !important; }
html body .bank-card-header { background: linear-gradient(120deg, rgba(255, 84, 112, 0.22), rgba(255, 138, 91, 0.12)) !important; border-bottom: 1px solid var(--v2-line); }
html body .bank-card-header .bank-name, html body .bank-card-header .bank-owner { color: #fff !important; }
html body .bank-card-header .bank-icon { background: rgba(255, 255, 255, 0.1) !important; border-radius: 12px; }
html body .bank-info { background: transparent !important; }
html body .bank-info-row { border-color: var(--v2-line) !important; }
html body .bank-info-row .info-label { color: var(--v2-muted) !important; }
html body .bank-info-row .info-label i { color: var(--v2-coral) !important; }
html body .bank-info-row .info-value { color: var(--v2-head) !important; font-weight: 700; }
html body .bank-info-row .info-value .copy-btn, html body .transfer-content-box .tc-value .copy-btn { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--v2-line2) !important; color: var(--v2-head) !important; border-radius: 8px !important; }
html body .bank-info-row .info-value .copy-btn:hover, html body .transfer-content-box .tc-value .copy-btn:hover { background: var(--v2-grad) !important; border-color: transparent !important; color: #fff !important; }
html body .bank-qr-wrap { background: #fff !important; border-radius: 14px; padding: 8px; display: inline-block; }
html body .transfer-content-box { background: rgba(255, 84, 112, 0.08) !important; border: 2px dashed rgba(255, 84, 112, 0.45) !important; border-radius: var(--v2-r-sm) !important; }
html body .transfer-content-box .tc-label { color: #ffb3bf !important; }
html body .transfer-content-box .tc-value { color: var(--v2-head) !important; font-weight: 800; }
html body .bank-card-footer { background: rgba(255, 255, 255, 0.03) !important; border-top: 1px solid var(--v2-line) !important; }
html body .bank-card-footer small { color: var(--v2-muted) !important; }

/* --- chung cho mọi trang nạp / hồ sơ: form, bảng lịch sử, ô lưu ý --- */
.inner-section .account-card { background: var(--v2-card) !important; border: 1px solid var(--v2-line) !important; border-radius: var(--v2-r) !important; box-shadow: none !important; backdrop-filter: blur(8px); }
.inner-section .form-control, .inner-section .form-select { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--v2-line2) !important; border-radius: var(--v2-r-sm) !important; color: var(--v2-head) !important; }
.inner-section .form-control::placeholder { color: var(--v2-muted); }
.inner-section .form-control:focus, .inner-section .form-select:focus { border-color: rgba(255, 138, 91, 0.7) !important; box-shadow: 0 0 0 4px rgba(255, 138, 91, 0.14) !important; }
.inner-section .form-select option { background: #131829; color: #fff; }
.inner-section .table { color: var(--v2-text); }
.inner-section .table thead th { background: rgba(255, 255, 255, 0.04) !important; color: var(--v2-muted) !important; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; border-color: var(--v2-line) !important; }
.inner-section .table td { border-color: var(--v2-line) !important; color: var(--v2-text) !important; vertical-align: middle; }
.inner-section .table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.inner-section .table-scroll { border-radius: var(--v2-r); border: 1px solid var(--v2-line); overflow: auto; }
.inner-section .shop-widget-btn, .inner-section .btn-inline { border-radius: var(--v2-r-sm) !important; }
.inner-section .filter-label { color: var(--v2-muted); }
.inner-section .pagination .page-link { background: rgba(255, 255, 255, 0.04); border-color: var(--v2-line); color: var(--v2-text); border-radius: 10px !important; margin: 0 3px; }
.inner-section .pagination .page-item.active .page-link { background: var(--v2-grad); border-color: transparent; color: #fff; }
.inner-section .page-info { color: var(--v2-muted); }
.inner-section .card { background: var(--v2-card-solid) !important; border: 1px solid var(--v2-line2) !important; border-radius: var(--v2-r) !important; color: var(--v2-text); }
.inner-section .card-header { background: rgba(255, 255, 255, 0.03) !important; border-color: var(--v2-line) !important; color: var(--v2-head); }
.inner-section label, .inner-section .form-label { color: var(--v2-text); font-weight: 600; font-size: 13.5px; }
.inner-section .alert { border-radius: var(--v2-r-sm); background: rgba(255, 255, 255, 0.04); border-color: var(--v2-line2); color: var(--v2-text); }
.inner-section .alert-warning { border-left: 3px solid var(--v2-amber); }
.inner-section .alert-info { border-left: 3px solid var(--v2-cyan); }
.inner-section .alert-danger { border-left: 3px solid var(--v2-rose); }
.inner-section .alert-success { border-left: 3px solid var(--v2-green); }

/* chữ trong ô lưu ý / màu inline cũ (blue, red) trên nền tối */
.inner-section .account-card, .inner-section .account-card p, .inner-section .account-card li { color: var(--v2-text); }
.inner-section .account-card h4, .inner-section .account-card h5, .inner-section .account-card b, .inner-section .account-card strong { color: var(--v2-head); }
.inner-section [style*="color:blue"], .inner-section [style*="color: blue"], .inner-section [style*="color:#0000ff"] { color: var(--v2-cyan) !important; }
.inner-section [style*="color:red"], .inner-section [style*="color: red"] { color: var(--v2-rose) !important; }
.inner-section [style*="color:green"], .inner-section [style*="color: green"] { color: var(--v2-green) !important; }
.inner-section .bank-note li, .inner-section .note-list li { color: var(--v2-text) !important; }

/* bỏ thanh trên cùng; bộ chọn ngôn ngữ / tiền tệ được chuyển xuống thanh menu (JS trong footer) */
.header-top { display: none !important; }
.navbar-info-group .hd-selects { display: inline-flex; gap: 6px; margin-right: 6px; }
.navbar-info-group .hd-selects .header-select {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px 0 10px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--v2-line); border-radius: 999px;
}
.navbar-info-group .hd-selects .header-select i { color: var(--v2-coral); font-size: 13px; }
/* Dung select GOC cua trinh duyet (menu native), an nice-select de khoi bang noi lech */
.navbar-info-group .hd-selects .nice-select { display: none !important; }
.navbar-info-group .hd-selects select,
.navbar-info-group .hd-selects select.select {
    display: inline-block !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important;
    color: var(--v2-head) !important; font-size: 12.5px; font-weight: 600;
    outline: 0; cursor: pointer; height: 34px; line-height: 34px;
    padding: 0 20px 0 2px; min-width: 0; width: auto;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238d97ad' stroke-width='1.5'/></svg>") !important;
    background-repeat: no-repeat !important; background-position: right 2px center !important;
}
.navbar-info-group .hd-selects select option { background: #131829; color: #fff; }

/* =========================================================
   MODAL MUA HANG (.product-view) — dong bo nen toi
   ========================================================= */
html body .product-view {
    background: var(--v2-card-solid, #131829) !important;
    color: var(--v2-text, #d5dceb);
    border: 1px solid var(--v2-line2, rgba(255,255,255,.14));
    border-radius: 18px !important;
}
html body .product-view .modal-content { background: transparent !important; border: 0 !important; }
html body .view-name a, html body .view-name { color: var(--v2-head, #f5f7fb) !important; }
html body .view-desc, html body .view-desc * { color: var(--v2-muted, #8d97ad) !important; }
html body .view-list-title { color: var(--v2-muted, #8d97ad) !important; font-weight: 600; }
html body .product-view .table, html body .product-view .table td, html body .product-view .table th {
    color: var(--v2-text, #d5dceb) !important;
    border-color: var(--v2-line, rgba(255,255,255,.08)) !important;
    background: transparent !important;
}
html body .product-view .table .text-right { color: var(--v2-head, #f5f7fb) !important; }
html body .view-price span, html body .view-price span small { color: var(--v2-amber, #ffb648) !important; }
html body .view-price del { color: var(--v2-muted, #8d97ad) !important; }
/* o nhap so luong + coupon */
html body .action-input, html body .form-control-view-product {
    background: rgba(255,255,255,.05) !important;
    color: #fff !important;
    border: 1px solid var(--v2-line2, rgba(255,255,255,.14)) !important;
    border-radius: 10px !important;
}
html body .action-input::placeholder, html body .form-control-view-product::placeholder { color: var(--v2-muted, #8d97ad); }
html body .action-minus1, html body .action-plus1 {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
    border: 1px solid var(--v2-line2, rgba(255,255,255,.14)) !important;
    border-radius: 10px !important;
}
html body .action-minus1:hover, html body .action-plus1:hover { background: var(--v2-grad, linear-gradient(120deg,#ff5470,#ff8a5b)) !important; border-color: transparent !important; }
/* nut "Total payment" so tien */
html body .product-view .text-danger, html body .product-view .text-primary { color: var(--v2-amber, #ffb648) !important; }
/* nut Add to Favorites */
html body .view-action-group, html body .label_favorite {
    background: rgba(255,255,255,.05) !important;
    color: var(--v2-head, #f5f7fb) !important;
    border: 1px solid var(--v2-line2, rgba(255,255,255,.14)) !important;
    border-radius: 12px !important;
}
html body .label_favorite:hover { background: rgba(255,255,255,.1) !important; }
html body .input_favorite:checked + .label_favorite { color: var(--v2-rose, #ff5470) !important; border-color: rgba(255,84,112,.5) !important; }
/* nut dong modal */
html body .product-view .modal-close, html body .product-view .modal-close-mobile { color: var(--v2-head, #f5f7fb) !important; }
/* chia se icon giu nguyen; tieu de PURCHASE INFORMATION */
html body .product-view h4, html body .product-view h5, html body .product-view .view-list-title.no-bg { color: var(--v2-head, #f5f7fb) !important; }

/* =========================================================
   FIX MOBILE: submenu (.dropdown-list) + Discord trong menu mobile
   ========================================================= */
html body .dropdown-list { background: rgba(19,24,41,.98) !important; border: 1px solid var(--v2-line2, rgba(255,255,255,.14)) !important; border-radius: 12px !important; padding: 6px !important; }
html body .dropdown-list li a {
    background: transparent !important;
    color: var(--v2-text, #d5dceb) !important;
    border-radius: 8px !important;
}
html body .dropdown-list li a:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
/* menu mobile off-canvas */
html body .nav-sidebar { background: #0b0f1a !important; color: var(--v2-text, #d5dceb); }
html body .nav-sidebar .nav-link { color: var(--v2-text, #d5dceb) !important; }
html body .nav-sidebar .nav-link:hover, html body .nav-sidebar .nav-link.active { color: #fff !important; }
html body .nav-sidebar .dropdown-link.active, html body .nav-sidebar .nav-link.dropdown-link[aria-expanded="true"] {
    background: rgba(255,255,255,.05) !important; color: #fff !important; border-radius: 10px;
}
html body .nav-header { border-bottom: 1px solid var(--v2-line, rgba(255,255,255,.08)); }
/* nut Discord trong menu mobile */
html body .nav-info-group .nav-discord {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,84,112,.18), rgba(255,138,91,.12));
    border: 1px solid rgba(255,138,91,.4);
}
html body .nav-info-group .nav-discord i { color: var(--v2-coral, #ff8a5b); font-size: 20px; }
html body .nav-info-group .nav-discord p { margin: 0; display: flex; flex-direction: column; line-height: 1.15; }
html body .nav-info-group .nav-discord small { color: #ffb69b; font-size: 11px; }
html body .nav-info-group .nav-discord span { color: #fff; font-weight: 600; font-size: 13.5px; }
/* menu category (san pham) mobile off-canvas cung nen toi */
html body .category-sidebar, html body .cate-sidebar { background: #0b0f1a !important; }
html body .category-link { color: var(--v2-text, #d5dceb) !important; }

/* =========================================================
   FIX MENU MOBILE: bo o vuong sau nut user + cho cuon muot
   ========================================================= */
html body .nav-sidebar { height: 100vh !important; height: 100dvh !important; display: flex; flex-direction: column; }
html body .nav-sidebar .nav-content {
    flex: 1 1 auto;
    max-height: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 24px;
}
/* bo khoi vuong toi sau nut ten nguoi dung */
html body .nav-sidebar .nav-btn {
    background: transparent !important;
    padding: 12px 0 6px !important;
    margin-bottom: 12px !important;
}
html body .nav-sidebar .nav-btn .btn-inline {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 999px !important;
    box-shadow: 0 8px 22px rgba(255, 84, 112, .35);
}
/* thanh so du gon gang */
html body .nav-sidebar .nav-select-group { background: transparent !important; }