/* ============================================================
           HTC Design System v4 — Breakthrough UI
           Brand: Red #e01c35 | Navy #0f172a | Blue #2563eb
           ============================================================ */

        /* Legacy compat */
        .p-item del { display: block; color: #9ca3af; font-size: 11px; font-weight: 400; text-decoration: line-through; }
        .global-tooltip { display: none; }

        /* ============================================================
           TOKENS
           ============================================================ */
        :root {
            --red:    #e01c35;
            --red2:   #c0172b;
            --red-l:  #fff1f2;
            --navy:   #0f172a;
            --navy2:  #1e293b;
            --blue:   #2563eb;
            --blue2:  #1d4ed8;
            --cyan:   #0891b2;
            --bg:     #f4f4f6;
            --card:   #ffffff;
            --border: #e2e8f0;
            --text:   #0f172a;
            --muted:  #64748b;
            --green:  #16a34a;
            /* Legacy aliases */
            --htc-red:   #e01c35;
            --htc-red2:  #c0172b;
            --htc-blue:  #2563eb;
            --htc-blue2: #1d4ed8;
            --htc-navy:  #0f172a;
            --htc-bg:    #f1f5f9;
            --htc-card:  #ffffff;
            --htc-border:#e2e8f0;
            --htc-text:  #0f172a;
            --htc-muted: #64748b;
        }

        /* ============================================================
           KEYFRAMES
           ============================================================ */
        @keyframes htc-fade-in {
            from { opacity:0; transform:translateY(8px) scale(.97); }
            to   { opacity:1; transform:translateY(0)   scale(1);   }
        }
        @keyframes htcFadeIn { from{opacity:0} to{opacity:1} }
        @keyframes htc-slide-up {
            from { opacity:0; transform:translateY(20px); }
            to   { opacity:1; transform:translateY(0); }
        }
        @keyframes marquee {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        @keyframes pulse-ring {
            0%   { transform:scale(.8); opacity:1; }
            100% { transform:scale(2);  opacity:0; }
        }
        @keyframes countdown-flip {
            from { opacity:0; transform:scaleY(0); }
            to   { opacity:1; transform:scaleY(1); }
        }

        /* ============================================================
           BASE
           ============================================================ */
        *, *::before, *::after { box-sizing: border-box; }
        html, body { margin: 0 !important; padding: 0 !important; }
        body { background: var(--bg); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; color: var(--text); }
        body > header,
        .htc-topbar {
            margin-top: 0 !important;
        }

        /* Custom max-w-8xl (not in default Tailwind) */
        .max-w-8xl { max-width: 1400px; }

        .htc-breadcrumbs { width: 100%; }
        .htc-breadcrumbs-list {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0;
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 15px;
            line-height: 1.6;
        }
        .htc-breadcrumbs-link {
            color: #475569;
            font-weight: 700;
            text-decoration: none;
            transition: color .18s ease;
        }
        .htc-breadcrumbs-link:hover { color: var(--red); }
        .htc-breadcrumbs-current {
            color: #1f2937;
            font-weight: 800;
            min-width: 0;
            flex: 0 1 auto;
        }
        .htc-breadcrumbs-current-text {
            display: inline-block;
            max-width: min(520px, 42vw);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            vertical-align: bottom;
        }
        .htc-breadcrumbs-sep {
            padding: 0 9px;
            color: #cbd5e1;
            font-weight: 700;
        }
        @media (max-width: 767px) {
            .htc-breadcrumbs-list { font-size: 14px; }
            .htc-breadcrumbs-current-text { max-width: 44vw; }
            .htc-breadcrumbs-sep { padding: 0 7px; }
        }

        /* ============================================================
           LANGUAGE SWITCHER
           ============================================================ */
        /* ─── Language Switcher ─── */
        .htc-lang-switcher { position:relative; display:inline-flex; align-items:center; flex-shrink:0; }
        .htc-lang-btn {
            display:inline-flex; align-items:center; gap:6px;
            height:36px; padding:0 11px;
            border:1.5px solid #e2e8f0; border-radius:50px;
            background:#fff; color:#0f172a; font-size:12.5px; font-weight:600;
            cursor:pointer; transition:border-color .15s, box-shadow .15s;
            white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.07);
        }
        .htc-lang-btn:hover { border-color:var(--red); box-shadow:0 2px 8px rgba(196,30,58,.15); }
        .htc-flag-img { width:20px; height:14px; border-radius:2px; overflow:hidden; display:inline-flex; flex-shrink:0; line-height:0; }
        .htc-flag-img svg { display:block; }
        .htc-lang-chevron { font-size:8px; color:#94a3b8; transition:transform .2s; margin-left:1px; }
        .htc-lang-btn.open .htc-lang-chevron { transform:rotate(180deg); }
        .htc-lang-dropdown {
            display:none; position:absolute; top:calc(100% + 6px); right:0;
            background:#fff; border:1px solid #e2e8f0; border-radius:12px;
            box-shadow:0 8px 24px rgba(0,0,0,.13); min-width:152px; z-index:9999;
            overflow:hidden; padding:4px 0;
        }
        .htc-lang-switcher.open .htc-lang-dropdown { display:block; animation:htcDrop .12s ease; }
        @keyframes htcDrop { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
        .htc-lang-item {
            display:flex; align-items:center; gap:9px;
            padding:9px 14px; font-size:13px; font-weight:500; color:#334155;
            cursor:pointer; width:100%; border:none; background:transparent;
            text-align:left; transition:background .1s;
        }
        .htc-lang-item:hover { background:#fef2f4; color:var(--red); }
        .htc-lang-item.active { font-weight:700; color:var(--red); background:#fff5f5; }
        .htc-lang-item-name { flex:1; }
        .htc-lang-check { font-size:11px; color:var(--red); }
        @media(max-width:640px){ .htc-lang-btn .htc-lang-name-full { display:none; } .htc-lang-btn { padding:0 8px; gap:4px; } }

        /* ============================================================
           MARQUEE / ANNOUNCEMENT BAR
           ============================================================ */
        .htc-marquee-bar {
            background: var(--red);
            color: rgba(255,255,255,.95);
            font-size: 11.5px;
            font-weight: 500;
            padding: 5px 0;
            overflow: hidden;
            white-space: nowrap;
        }
        .htc-marquee-inner {
            display: inline-block;
            animation: marquee 80s linear infinite;
            padding-left: 0;
            white-space: nowrap;
        }
        .htc-marquee-inner span { margin-right: 40px; }
        .htc-marquee-inner span::before { content: '\2022  '; color: #fde68a; font-weight: 900; }

        /* ============================================================
           HEADER — TOPBAR (Red brand strip)
           ============================================================ */
        .htc-topbar {
            background: linear-gradient(90deg, #b5101f 0%, var(--red) 50%, #d01428 100%);
            padding: 6px 0;
            font-size: 12.5px;
            color: rgba(255,255,255,.92);
            font-weight: 400;
            letter-spacing: .02em;
            border-bottom: 1px solid rgba(0,0,0,.15);
        }
        .htc-topbar a {
            color: rgba(255,255,255,.88);
            text-decoration: none;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12.5px;
            transition: color .15s, background .15s;
        }
        .htc-topbar a:hover { color: #fff; background: rgba(255,255,255,.15); }
        /* Right-side trust badges */
        .htc-topbar-trust { display: flex; align-items: center; gap: 14px; }
        .htc-topbar-badge {
            display: flex; align-items: center; gap: 5px;
            color: rgba(255,255,255,.92); font-size: 12.5px; font-weight: 500;
            white-space: nowrap;
        }
        .htc-topbar-badge svg { flex-shrink: 0; }
        .htc-topbar-sep { width: 1px; height: 13px; background: rgba(255,255,255,.28); }
        /* Hotline pill in topbar */
        .htc-topbar-hl {
            display: flex; align-items: center; gap: 5px;
            background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
            border-radius: 20px; padding: 2px 10px 2px 7px;
            color: #fff !important; font-weight: 700; font-size: 12.5px;
            text-decoration: none; white-space: nowrap;
            transition: background .18s;
        }
        .htc-topbar-hl:hover { background: rgba(255,255,255,.28) !important; color: #fff !important; }

        /* ============================================================
           HEADER — MAIN BAR
           ============================================================ */
        .htc-header-main {
            background: #fff;
            box-shadow: 0 2px 16px rgba(0,0,0,.09);
            position: relative;
            z-index: 100;
        }

        /* Sticky header */
        .menu-scroll.htc-scroll-header { background: var(--red) !important; }
        .htc-scroll-header .htc-search,
        .htc-scroll-header .htc-cat-btn,
        .htc-scroll-header .htc-hotline-btn,
        .htc-scroll-header .htc-buildpc-btn {
            height: 40px;
        }
        .htc-scroll-header .htc-search button {
            height: 100%;
            min-height: 0;
        }

        /* Search */
        .htc-search {
            display: flex;
            align-items: center;
            border: 1.5px solid #d1dae8;
            border-radius: 8px;
            overflow: hidden;
            background: #f8fafc;
            height: 44px;
            transition: box-shadow .22s, border-color .22s, background .22s;
        }
        .htc-search:focus-within {
            box-shadow: 0 2px 10px rgba(224,28,53,.12);
            border-color: var(--red);
            background: #fff;
        }
        .htc-search input {
            flex: 1; min-width: 0; padding: 0 16px; height: 100%;
            font-size: 14.5px; border: none; outline: none;
            background: transparent; color: var(--text);
        }
        .htc-search input::placeholder { color: #aab4c3; font-weight: 400; }
        .htc-search button {
            background: var(--red); border: none;
            padding: 0 20px; height: 100%; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            gap: 6px; font-size: 14px; font-weight: 600; color: #fff;
            white-space: nowrap;
            transition: background .18s;
            flex-shrink: 0;
        }
        .htc-search button:hover { background: var(--red2); }

        /* Autocomplete dropdown */
        .htc-ac-wrap { position: relative; }
        .htc-ac-dropdown {
            position: absolute; top: 100%; left: 0; right: 0;
            background: #fff; border-radius: 0 0 10px 10px;
            box-shadow: 0 8px 32px rgba(0,0,0,.15);
            z-index: 9999; max-height: 420px; overflow-y: auto;
            border: 1px solid #e2e8f0; border-top: none;
        }
        .htc-ac-section { padding: 8px 0; }
        .htc-ac-section:not(:last-child) { border-bottom: 1px solid #f1f5f9; }
        .htc-ac-label {
            padding: 4px 16px; font-size: 11px; font-weight: 700;
            color: #94a3b8; text-transform: uppercase; letter-spacing: .05em;
        }
        .htc-ac-item {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 16px; cursor: pointer; text-decoration: none;
            color: #1e293b; transition: background .15s;
        }
        .htc-ac-item:hover { background: #f8fafc; }
        .htc-ac-item img {
            width: 40px; height: 40px; object-fit: contain;
            border-radius: 6px; border: 1px solid #e2e8f0; flex-shrink: 0;
        }
        .htc-ac-item .htc-ac-name {
            flex: 1; font-size: 13px; line-height: 1.3;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }
        .htc-ac-item .htc-ac-price {
            font-size: 13px; font-weight: 700; color: var(--red);
            white-space: nowrap; flex-shrink: 0;
        }
        .htc-ac-item .htc-ac-oldprice {
            font-size: 11px; color: #94a3b8; text-decoration: line-through;
        }
        .htc-ac-item .htc-ac-outstock {
            font-size: 11px; color: #94a3b8; font-style: italic;
        }
        .htc-ac-cat {
            display: flex; align-items: center; gap: 8px;
            padding: 7px 16px; cursor: pointer; text-decoration: none;
            color: #475569; font-size: 13px; transition: background .15s;
        }
        .htc-ac-cat:hover { background: #f8fafc; color: var(--red); }
        .htc-ac-cat svg { flex-shrink: 0; }
        .htc-ac-empty { padding: 16px; text-align: center; color: #94a3b8; font-size: 13px; }

        /* ===== Flash Sale ===== */
        .htc-flash-sale {
            max-width: 1280px; margin: 28px auto; padding: 0 16px;
        }
        .htc-flash-header {
            display: flex; align-items: center; justify-content: space-between;
            background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
            border-radius: 14px 14px 0 0; padding: 14px 24px; gap: 12px; flex-wrap: wrap;
        }
        .htc-flash-title {
            display: flex; align-items: center; gap: 8px;
        }
        .htc-flash-icon { font-size: 22px; }
        .htc-flash-text {
            font-size: 18px; font-weight: 900; color: #fff; letter-spacing: .06em;
        }
        .htc-flash-name {
            font-size: 13px; color: rgba(255,255,255,.8); font-weight: 500;
        }
        .htc-flash-countdown {
            display: flex; align-items: center; gap: 6px;
        }
        .htc-cd-label {
            font-size: 12px; color: rgba(255,255,255,.8); font-weight: 600; margin-right: 4px;
        }
        .htc-cd-box {
            background: #fff; color: #dc2626; font-size: 16px; font-weight: 800;
            padding: 4px 8px; border-radius: 6px; min-width: 32px; text-align: center;
            font-variant-numeric: tabular-nums;
        }
        .htc-cd-sep { color: #fff; font-weight: 800; font-size: 16px; }
        .htc-flash-grid {
            display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 1px; background: #f1f5f9; border-radius: 0 0 14px 14px; overflow: hidden;
        }
        .htc-flash-card {
            background: #fff; display: flex; flex-direction: column; text-decoration: none;
            color: #1e293b; position: relative; padding: 14px; transition: box-shadow .2s;
        }
        .htc-flash-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); z-index: 1; }
        .htc-flash-card__link {
            display: flex;
            flex-direction: column;
            min-height: 100%;
            color: inherit;
            text-decoration: none;
        }
        .htc-flash-badge {
            position: absolute; top: 8px; left: 8px; background: #dc2626; color: #fff;
            font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 6px;
        }
        .htc-flash-img {
            width: 100%; aspect-ratio: 1; display: flex; align-items: center;
            justify-content: center; margin-bottom: 8px;
            position: relative;
        }
        .htc-flash-img img {
            max-width: 100%; max-height: 100%; object-fit: contain;
        }
        .htc-flash-pname {
            font-size: 12.5px; line-height: 1.35; margin: 0 0 6px;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; min-height: 34px;
        }
        .htc-flash-prices { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
        .htc-flash-sale-price { font-size: 15px; font-weight: 800; color: #dc2626; }
        .htc-flash-orig-price {
            font-size: 12px; color: #94a3b8; text-decoration: line-through;
        }
        .htc-flash-progress { margin-top: 8px; }
        .htc-flash-info {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .htc-flash-footer {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #f1f5f9;
        }
        .htc-flash-bar {
            height: 6px; background: #fee2e2; border-radius: 3px; overflow: hidden;
        }
        .htc-flash-bar-fill {
            height: 100%; background: linear-gradient(90deg, #f87171, #dc2626);
            border-radius: 3px; transition: width .4s;
        }
        .htc-flash-sold {
            font-size: 11px; color: #dc2626; font-weight: 600; margin-top: 3px; display: block;
        }
        .htc-flash-viewall {
            display: inline-flex; align-items: center; gap: 4px;
            background: #fff; color: #dc2626; font-size: 13px; font-weight: 700;
            padding: 7px 18px; border-radius: 8px; text-decoration: none;
            transition: all .2s; white-space: nowrap;
        }
        .htc-flash-viewall:hover { background: #fef2f2; transform: translateX(2px); }
        @media(max-width:640px){
            .htc-flash-grid { grid-template-columns: repeat(2, 1fr); }
            .htc-flash-header { padding: 10px 16px; }
            .htc-flash-text { font-size: 15px; }
        }

        /* Category btn */
        .htc-cat-btn {
            display: flex; align-items: center; gap: 8px;
            background: var(--red); color: #fff;
            height: 44px; padding: 0 20px; border-radius: 8px;
            font-size: 14.5px; font-weight: 700; border: none; cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(224,28,53,.28);
            transition: background .18s, transform .15s, box-shadow .18s;
        }
        .htc-cat-btn:hover {
            background: var(--red2);
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(224,28,53,.38);
        }
        /* Hotline btn — white bg + red border */
        .htc-hotline-btn {
            display: flex; align-items: center; gap: 8px;
            background: #fff; border: 1.5px solid var(--red);
            border-radius: 8px; height: 44px; padding: 0 16px;
            cursor: pointer; text-decoration: none;
            font-size: 13px; font-weight: 700; color: var(--red);
            white-space: nowrap;
            transition: background .18s, box-shadow .18s;
            box-shadow: 0 1px 4px rgba(224,28,53,.1);
        }
        .htc-hotline-btn:hover {
            background: #fff5f5;
            box-shadow: 0 4px 12px rgba(224,28,53,.18);
        }
        .htc-hotline-label {
            font-size: 10px; color: var(--red); font-weight: 700;
            letter-spacing: .06em; text-transform: uppercase; line-height: 1;
        }
        .htc-hotline-text {
            font-size: 13px; color: var(--red); font-weight: 800;
            line-height: 1.3; white-space: nowrap;
        }
        .htc-hotline-dropdown {
            border: 1px solid #fde2e7;
            box-shadow: 0 18px 40px rgba(15,23,42,.12) !important;
        }
        .htc-hotline-dropdown-content {
            background: linear-gradient(180deg, #fff7f8 0%, #ffffff 100%);
            border: 1px solid #fde2e7;
            border-radius: 14px;
            padding: 10px 12px;
            color: #991b1b;
            font-size: 12px;
            line-height: 1.6;
            font-weight: 600;
            box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
        }
        .htc-hotline-dropdown-content a {
            color: var(--red);
            font-weight: 800;
            text-decoration: none;
        }
        .htc-hotline-dropdown-content a:hover {
            color: var(--red2);
            text-decoration: underline;
        }
        .htc-hotline-dropdown-content p,
        .htc-hotline-dropdown-content div,
        .htc-hotline-dropdown-content li {
            margin: 0;
        }
        .htc-hotline-dropdown-content ul,
        .htc-hotline-dropdown-content ol {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .htc-hotline-dropdown-content > * + * {
            margin-top: 8px;
        }
        .htc-hotline-list {
            display: grid;
            gap: 8px;
        }
        .htc-hotline-item {
            display: grid;
            grid-template-columns: 28px minmax(0, 1fr);
            gap: 10px;
            align-items: start;
            padding: 8px 10px;
            border-radius: 12px;
            background: rgba(255,255,255,.82);
            border: 1px solid #fde2e7;
            box-shadow: 0 8px 14px rgba(224,28,53,.05);
        }
        .htc-hotline-item__index {
            width: 28px;
            height: 28px;
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--red), var(--red2));
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: .04em;
            box-shadow: 0 6px 12px rgba(224,28,53,.18);
        }
        .htc-hotline-item__body {
            min-width: 0;
            display: grid;
            gap: 2px;
        }
        .htc-hotline-item__label {
            font-size: 10px;
            line-height: 1.4;
            font-weight: 700;
            color: #7f1d1d;
            text-transform: uppercase;
            letter-spacing: .03em;
        }
        .htc-hotline-item__phone {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            max-width: 100%;
            font-size: 16px;
            line-height: 1.1;
            font-weight: 900;
            letter-spacing: .01em;
            color: var(--red) !important;
            text-decoration: none;
        }
        .htc-hotline-item__phone:hover {
            color: var(--red2) !important;
            text-decoration: none;
        }
        .htc-hotline-item__meta {
            font-size: 11px;
            line-height: 1.45;
            color: #475569;
            font-weight: 600;
        }
        @media (max-width: 640px) {
            .htc-hotline-item {
                grid-template-columns: 26px minmax(0, 1fr);
                gap: 8px;
                padding: 8px 9px;
            }
            .htc-hotline-item__index {
                width: 26px;
                height: 26px;
                font-size: 9px;
            }
            .htc-hotline-item__phone {
                font-size: 14px;
            }
        }

        /* Action btn (cart, wishlist etc) */
        .htc-action-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 2px; color: var(--muted); font-size: 11.5px; font-weight: 600;
            text-decoration: none; height: 44px; padding: 0 10px; border-radius: 8px;
            border: 1.5px solid transparent;
            transition: background .18s, color .18s, border-color .18s;
        }
        .htc-action-btn:hover {
            background: #fff1f2; color: var(--red);
            border-color: #fecaca;
        }
        .htc-action-btn svg { width: 22px; height: 22px; }

        /* Cart badge */
        .htc-cart-wrap { position: relative; }
        .htc-cart-badge {
            position: absolute; top: -7px; right: -8px;
            background: var(--red); color: #fff;
            font-size: 11px; font-weight: 800;
            min-width: 20px; height: 20px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center; padding: 0 4px;
            border: 2px solid #fff;
            box-shadow: 0 1px 4px rgba(0,0,0,.15);
        }

        /* Build PC btn — navy anchor/accent */
        .htc-buildpc-btn {
            display: flex; align-items: center; gap: 8px;
            background: var(--red) !important; color: #fff !important;
            border: none !important;
            border-radius: 8px; height: 44px; padding: 0 16px;
            font-size: 14px; font-weight: 700; cursor: pointer;
            text-decoration: none !important; white-space: nowrap;
            box-shadow: 0 2px 8px rgba(224,28,53,.28);
            transition: background .18s, transform .15s, box-shadow .18s;
        }
        .htc-buildpc-btn:hover {
            background: var(--red2) !important;
            transform: translateY(-1px);
            box-shadow: 0 4px 14px rgba(224,28,53,.38);
        }

        /* Newsletter / subscribe section */

        /* ---- Wishlist heart on product card ---- */
        .htc-card { position:relative; }
        .htc-footer-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
        .htc-wl-btn { position:static; width:34px; height:34px; border-radius:9px; background:#f1f5f9; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; flex-shrink:0; }
        .htc-wl-btn:hover { background:#e2e8f0; transform:scale(1.1); }
        .htc-wl-btn svg { width:18px; height:18px; transition:all .2s; }
        .htc-wl-btn.is-active svg { fill:var(--red); stroke:var(--red); }
        .htc-wl-btn.is-active { background:#fef2f2; }
        .htc-footer-actions .htc-cmp-btn {
            width:34px;
            height:34px;
            border-radius:9px;
            background:#f1f5f9;
            border:none;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#64748b;
            transition:all .2s;
            flex-shrink:0;
            padding:0;
        }
        .htc-footer-actions .htc-cmp-btn:hover {
            background:#e2e8f0;
            transform:scale(1.1);
        }
        .htc-footer-actions .htc-cmp-btn svg {
            width:16px;
            height:16px;
        }
        .htc-footer-actions .htc-cmp-btn.is-active {
            background:#fff1f2;
            color:var(--red);
        }

        /* ---- Compare + Wishlist on card overlay ---- */
        .htc-overlay-actions { display:flex; gap:6px; margin-top:0; }
        .htc-overlay-sm {
            width: 100%;
            min-height: 36px;
            justify-content: center;
            font-size: 11px;
            font-weight: 700;
            padding: 7px 10px;
            border-radius: 10px;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.28);
            color: #fff;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all .2s;
            backdrop-filter: blur(2px);
        }
        .htc-overlay-sm:hover { background: rgba(255,255,255,.24); }
        .htc-overlay-sm.is-active { background:var(--red); border-color:var(--red); }

        /* ---- Floating compare bar ---- */
        .htc-compare-bar { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:#fff; border-top:2px solid var(--red); box-shadow:0 -4px 20px rgba(0,0,0,.12); padding:12px 20px; display:none; transition:transform .3s; }
        .htc-compare-bar.is-visible { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
        .htc-compare-bar__items { display:flex; gap:10px; align-items:center; }
        .htc-compare-bar__item { display:flex; align-items:center; gap:6px; background:#f8fafc; border:1px solid #e5e7eb; border-radius:8px; padding:6px 10px; font-size:12px; max-width:200px; }
        .htc-compare-bar__item img { width:36px; height:36px; object-fit:contain; border-radius:4px; flex-shrink:0; }
        .htc-compare-bar__item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--navy); font-weight:500; }
        .htc-compare-bar__rm { background:none; border:none; color:#94a3b8; cursor:pointer; font-size:16px; padding:0 2px; margin-left:4px; }
        .htc-compare-bar__rm:hover { color:var(--red); }
        .htc-compare-bar__go { background:var(--red); color:#fff; font-weight:700; font-size:13px; padding:8px 20px; border-radius:8px; border:none; cursor:pointer; transition:background .2s; }
        .htc-compare-bar__go:hover { background:var(--red2); }
        .htc-compare-bar__clear { background:none; border:1px solid #e5e7eb; color:#64748b; font-size:12px; padding:6px 12px; border-radius:6px; cursor:pointer; }

        @media (max-width: 768px) {
            .htc-compare-bar {
                left: 10px;
                right: 10px;
                bottom: 10px;
                border: 1px solid #fecaca;
                border-top-width: 1px;
                border-radius: 16px;
                padding: 10px 12px;
                box-shadow: 0 12px 30px rgba(15,23,42,.16);
                background: rgba(255,255,255,.98);
                backdrop-filter: blur(8px);
            }
            .htc-compare-bar.is-visible {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto auto;
                gap: 8px;
                align-items: center;
            }
            .htc-compare-bar__items {
                min-width: 0;
                gap: 6px;
                overflow: hidden;
                position: relative;
                padding-left: 84px;
            }
            .htc-compare-bar__items::before {
                content: attr(data-count-label);
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                display: inline-flex;
                align-items: center;
                height: 28px;
                padding: 0 10px;
                border-radius: 999px;
                background: #fff1f2;
                border: 1px solid #fecdd3;
                color: var(--red);
                font-size: 11px;
                font-weight: 800;
                white-space: nowrap;
                letter-spacing: .03em;
            }
            .htc-compare-bar__item {
                width: 30px;
                min-width: 30px;
                height: 30px;
                padding: 0;
                border-radius: 999px;
                justify-content: center;
                overflow: hidden;
                box-shadow: 0 4px 10px rgba(15,23,42,.08);
            }
            .htc-compare-bar__item:nth-child(n+4) {
                display: none;
            }
            .htc-compare-bar__item img {
                width: 100%;
                height: 100%;
                border-radius: inherit;
            }
            .htc-compare-bar__item span,
            .htc-compare-bar__rm {
                display: none;
            }
            .htc-compare-bar__go,
            .htc-compare-bar__clear {
                min-height: 34px;
                padding: 0 12px;
                border-radius: 10px;
                font-size: 11px;
                white-space: nowrap;
            }
            .htc-compare-bar__clear {
                padding: 0 10px;
            }
        }

        /* ---- Recently Viewed section ---- */
        .htc-rv-section { width:100%; }
        .htc-rv-band { padding-bottom:14px; }
        .htc-rv-chip {
            display:inline-flex;
            align-items:center;
            padding:4px 10px;
            border-radius:999px;
            background:#fff1f2;
            border:1px solid #fecdd3;
            color:var(--red);
            font-size:11px;
            font-weight:800;
            letter-spacing:.05em;
            text-transform:uppercase;
        }
        .htc-rv-nav {
            display:flex;
            align-items:center;
            gap:8px;
        }
        .htc-rv-arrow {
            width:40px;
            height:40px;
            border:none;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:#fff7f7;
            color:var(--red);
            box-shadow:0 8px 20px rgba(15,23,42,.08);
            border:1px solid #fecaca;
            cursor:pointer;
            transition:transform .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
        }
        .htc-rv-arrow:hover {
            transform:translateY(-1px);
            background:var(--red);
            color:#fff;
        }
        .htc-rv-arrow.is-disabled {
            opacity:.45;
            cursor:default;
            pointer-events:none;
            transform:none;
        }
        .htc-rv-grid {
            display:flex;
            gap:12px;
            overflow-x:auto;
            overflow-y:visible;
            scroll-snap-type:x proximity;
            -webkit-overflow-scrolling:touch;
            scrollbar-width:none;
            padding:4px 2px 12px;
            scroll-behavior:smooth;
        }
        .htc-rv-grid::-webkit-scrollbar { display:none; }
        .htc-rv-cell {
            flex:0 0 calc((100% - 48px) / 5);
            min-width:220px;
            scroll-snap-align:start;
        }
        .htc-rv-card {
            overflow:hidden;
            min-width:0;
            height:100%;
        }
        .htc-rv-card .htc-card__img-wrap {
            background:linear-gradient(180deg,#ffffff 0%, #f8fafc 100%);
            padding:12px;
        }
        .htc-rv-card .htc-card__body {
            gap:8px;
        }
        .htc-rv-card .htc-card__name {
            min-height:2.5em;
        }
        .htc-rv-card .htc-card__footer {
            border-top:none;
            padding-top:0;
        }
        .htc-rv-card .htc-card__price {
            font-size:1rem;
        }
        @media (max-width:1279px) {
            .htc-rv-cell { flex-basis:calc((100% - 36px) / 4); }
        }
        @media (max-width:1023px) {
            .htc-rv-cell { flex-basis:calc((100% - 24px) / 3); }
        }
        @media (max-width:767px) {
            .htc-rv-cell { flex:0 0 min(220px, 74vw); }
            .htc-rv-chip {
                font-size:10px;
                padding:4px 8px;
            }
            .htc-rv-nav {
                gap:6px;
            }
            .htc-rv-arrow {
                width:36px;
                height:36px;
            }
        }

        .htc-newsletter-section {
            background: transparent;
            padding: 22px 0 34px;
        }
        .htc-newsletter-card {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1.5px solid #e2e8f0;
            border-radius: 24px;
            padding: 30px 32px;
            box-shadow: 0 8px 30px rgba(0,0,0,.08);
        }
        .htc-newsletter-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(224,28,53,.08), transparent 30%),
                radial-gradient(circle at bottom left, rgba(15,23,42,.05), transparent 28%);
            pointer-events: none;
        }
        .htc-newsletter-inner {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            flex-wrap: wrap;
        }
        .htc-newsletter-copy {
            flex: 1 1 520px;
            min-width: 280px;
        }
        .htc-newsletter-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: var(--red);
            border: 1px solid var(--red);
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            margin-bottom: 14px;
            box-shadow: 0 8px 18px rgba(224,28,53,.18);
        }
        .htc-newsletter-title {
            font-size: clamp(1.38rem, 1.9vw, 1.78rem);
            line-height: 1.28;
            font-weight: 900;
            color: #0f172a;
            margin: 0 0 10px;
        }
        .htc-newsletter-title strong {
            color: var(--red);
        }
        .htc-newsletter-sub {
            font-size: 15px;
            line-height: 1.75;
            color: #475569;
            margin: 0;
            max-width: 720px;
        }
        .htc-newsletter-points {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 18px;
        }
        .htc-newsletter-point {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 14px;
            background: rgba(255,255,255,.94);
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            color: #334155;
            font-size: 13px;
            font-weight: 700;
        }
        .htc-newsletter-form-wrap {
            flex: 0 1 430px;
            width: 100%;
            max-width: 430px;
        }
        .htc-subscribe-form {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            background: #fff;
            border: 1.5px solid #f7b8c2;
            border-radius: 18px;
            box-shadow: 0 12px 30px rgba(224,28,53,.12);
        }
        .htc-subscribe-input {
            flex: 1;
            min-width: 0;
            height: 48px;
            padding: 0 16px;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            outline: none;
            font-size: 14px;
            color: #0f172a;
            background: #fff;
            transition: border-color .2s, box-shadow .2s;
        }
        .htc-subscribe-input:focus {
            border-color: var(--red);
            box-shadow: 0 0 0 3px rgba(224,28,53,.12);
        }
        .htc-subscribe-input::placeholder {
            color: #94a3b8;
        }
        .htc-subscribe-btn {
            height: 48px;
            padding: 0 22px;
            border: none;
            border-radius: 14px;
            background: var(--red);
            color: #fff;
            font-size: 14px;
            font-weight: 800;
            white-space: nowrap;
            cursor: pointer;
            box-shadow: 0 10px 20px rgba(224,28,53,.22);
            transition: transform .18s, box-shadow .18s, background .18s;
        }
        .htc-subscribe-btn:hover {
            background: var(--red2);
            transform: translateY(-1px);
            box-shadow: 0 14px 26px rgba(224,28,53,.28);
        }
        .htc-newsletter-note {
            margin-top: 12px;
            font-size: 12.5px;
            color: #64748b;
            text-align: center;
        }

        /* ============================================================
           CATEGORY ICON GRID
           ============================================================ */
        .htc-cat-grid {
            background: #fff; border-radius: 16px;
            padding: 18px 12px; margin-top: 10px;
            box-shadow: 0 1px 8px rgba(0,0,0,.06);
            border: 1.5px solid var(--border);
        }
        .htc-cat-grid-title {
            font-size: 1.2rem; font-weight: 800; color: var(--text);
            display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
        }
        .htc-cat-grid-title::before {
            content: ''; width: 4px; height: 20px;
            background: var(--red); border-radius: 2px; display: block;
        }
        .htc-cat-icon-item {
            display: flex; flex-direction: column; align-items: center; gap: 7px;
            text-decoration: none; transition: transform .2s;
        }
        .htc-cat-icon-item:hover { transform: translateY(-3px); }
        .htc-cat-icon-img {
            width: 64px; height: 64px; border-radius: 14px;
            display: flex; align-items: center; justify-content: center;
            background: #f8fafc; border: 1.5px solid #e2e8f0;
            transition: box-shadow .2s, background .2s, transform .2s;
            flex-shrink: 0;
        }
        .htc-cat-icon-item:hover .htc-cat-icon-img {
            box-shadow: 0 4px 14px rgba(0,0,0,.10);
            background: #fff1f2;
            transform: translateY(-2px);
        }
        .htc-cat-icon-item span {
            font-size: 12px; font-weight: 600; color: var(--text);
            text-align: center; line-height: 1.3;
            text-transform: uppercase; letter-spacing: .04em;
        }

        /* ============================================================
           FLASH DEAL SECTION
           ============================================================ */
        .htc-deal-bar {
            background: linear-gradient(135deg, #1a0a0e 0%, #3b0d17 40%, var(--navy) 100%);
            border-radius: 16px; padding: 16px 20px; margin: 12px 0;
            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
        }
        .htc-deal-label {
            display: flex; align-items: center; gap: 10px;
        }
        .htc-deal-label-text {
            font-size: 1.125rem; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .04em;
        }
        .htc-deal-flame { font-size: 1.5rem; animation: htcFadeIn .5s infinite alternate; }
        .htc-countdown {
            display: flex; align-items: center; gap: 6px;
        }
        .htc-countdown-block {
            display: flex; flex-direction: column; align-items: center;
            background: var(--red); border-radius: 8px; min-width: 42px;
            padding: 6px 4px;
        }
        .htc-cd-num { font-size: 1.25rem; font-weight: 900; color: #fff; line-height: 1; font-feature-settings: 'tnum'; }
        .htc-cd-label { font-size: 9px; color: rgba(255,255,255,.75); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

        /* ============================================================
           SECTION TITLES
           ============================================================ */
        .htc-section-wrap {
            display: flex; align-items: center; justify-content: space-between;
            margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
        }
        .htc-section-title {
            display: flex; align-items: center; gap: 10px;
            font-size: 1.125rem; font-weight: 900; color: var(--text);
        }
        .htc-section-title::before {
            content: ''; display: block; width: 4px; height: 24px;
            background: var(--red); border-radius: 2px;
        }
        .htc-section-link {
            font-size: .8125rem; font-weight: 600; color: var(--red);
            text-decoration: none; display: flex; align-items: center; gap: 4px;
            padding: 5px 12px; border: 1px solid #fecaca; border-radius: 8px;
            transition: background .2s;
        }
        .htc-section-link:hover { background: var(--red-l); }
        .htc-section-line { height: 2px; background: linear-gradient(90deg, var(--red), transparent); margin-bottom: 14px; }

        /* Filter tabs */
        .htc-filter-tabs {
            display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 0;
        }
        .htc-filter-tab {
            font-size: 12.5px; font-weight: 600; color: var(--muted);
            padding: 6px 16px; border: 1.5px solid var(--border);
            border-radius: 20px; cursor: pointer; text-decoration: none;
            transition: all .2s; white-space: nowrap; background: #fff;
        }
        .htc-filter-tab:hover, .htc-filter-tab.active {
            background: var(--red); color: #fff; border-color: var(--red);
        }
        .htc-filter-view-all { margin-left: auto; background: var(--red-l); color: var(--red); border-color: #fecaca; }
        .htc-filter-view-all:hover { background: var(--red); color: #fff; }
        .htc-section-title-row { display: flex; align-items: center; gap: 8px; }

        /* Slider containers — clamp height before Slick JS runs */
        #slick-outstanding:not(.slick-initialized),
        #slick-pr1:not(.slick-initialized),
        #slick-pr2:not(.slick-initialized),
        #slick-pr3:not(.slick-initialized),
        #slick-pr4:not(.slick-initialized),
        #slick-pr5:not(.slick-initialized),
        #slick-pr6:not(.slick-initialized) {
            overflow: hidden;
            max-height: 300px;
        }

        /* ── Fix: Slick JS sets inline height on .slick-track/.slick-slide which causes
           blank space below cards. Using flexbox makes slides collapse to content height. ── */
        #slick-outstanding .slick-track,
        #slick-pr1 .slick-track, #slick-pr2 .slick-track,
        #slick-pr3 .slick-track, #slick-pr4 .slick-track,
        #slick-pr5 .slick-track, #slick-pr6 .slick-track {
            display: flex !important;
            align-items: flex-start !important;
        }
        #slick-outstanding .slick-list,
        #slick-pr1 .slick-list, #slick-pr2 .slick-list,
        #slick-pr3 .slick-list, #slick-pr4 .slick-list,
        #slick-pr5 .slick-list, #slick-pr6 .slick-list {
            overflow: hidden !important;
            height: auto !important;
        }
        #slick-outstanding .slick-slide,
        #slick-pr1 .slick-slide, #slick-pr2 .slick-slide,
        #slick-pr3 .slick-slide, #slick-pr4 .slick-slide,
        #slick-pr5 .slick-slide, #slick-pr6 .slick-slide {
            height: auto !important;
            float: none !important;
        }
        /* Slider wrappers — no extra space */
        #slick-outstanding, #slick-pr1, #slick-pr2,
        #slick-pr3, #slick-pr4, #slick-pr5, #slick-pr6 {
            padding: 0 !important;
            margin-bottom: 0 !important;
            overflow: hidden !important;
        }

        /* Category icon row (inside htc-cat-grid) */
        .htc-cat-icon-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            padding: 4px 0;
        }
        @media (min-width: 768px) { .htc-cat-icon-row { grid-template-columns: repeat(10, 1fr); } }

        /* Deal bar extras */
        .htc-deal-viewall {
            margin-left: auto; font-size: .8125rem; font-weight: 700;
            color: var(--red); text-decoration: none; white-space: nowrap;
            padding: 5px 14px; border: 1.5px solid #fecaca; border-radius: 20px;
            background: #fff3f3; transition: background .2s, color .2s;
        }
        .htc-deal-viewall:hover { background: var(--red); color: #fff; }
        .htc-cd-sep { font-size: 1.4rem; font-weight: 900; color: #fff; line-height: 1; padding: 0 2px; align-self: center; }

        /* Testimonials slick nav dots */
        #slick-testimonials .slick-dots { bottom: -24px; }
        #slick-testimonials .slick-dots li button:before { color: var(--red); }
        #slick-testimonials .slick-dots li.slick-active button:before { color: var(--red); opacity: 1; }
        #slick-testimonials .slick-prev, #slick-testimonials .slick-next {
            width: 32px; height: 32px; background: var(--red);
            border-radius: 50%; z-index: 5;
        }
        #slick-testimonials .slick-prev:before, #slick-testimonials .slick-next:before { font-size: 14px; }

        /* ============================================================
           PRODUCT CARD — htc-card (category pages)
           KEY: overflow:visible so tooltip can bleed out
           ============================================================ */
        .htc-card {
            background: var(--card);
            border-radius: 14px;
            border: 1px solid var(--border);
            box-shadow: 0 1px 3px rgba(0,0,0,.04);
            height: 100%;
            display: flex; flex-direction: column;
            transition: box-shadow .32s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1), border-color .24s;
            position: relative;
            overflow: visible;                       /* ← allows tooltip to overflow */
            z-index: 0;                              /* create stacking context at rest */
        }
        .htc-card:hover {
            box-shadow: 0 8px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
            transform: translateY(-4px);
            border-color: #e0e7ef;
            z-index: 200 !important;                 /* dominate all siblings */
        }

        /* Image area */
        .htc-card__img-wrap {
            display: block;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            background: #f8fafc;
            position: relative;
            isolation: isolate;
            padding: 10px;
            border-radius: 14px 14px 0 0;          /* round only top corners */
        }
        /* Skeleton shimmer placeholder */
        .htc-card__img-wrap::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(90deg, #f1f5f9 25%, #e8ecf1 37%, #f1f5f9 63%);
            background-size: 400% 100%;
            animation: htcShimmerBg 1.4s ease infinite;
            z-index: 1;
            border-radius: 14px 14px 0 0;
            transition: opacity .3s ease;
        }
        .htc-card__img-wrap.img-ready::before { opacity: 0; pointer-events: none; }
        @keyframes htcShimmerBg{0%{background-position:100% 50%}100%{background-position:0 50%}}
        .htc-card__img {
            width: 100%; height: 100%; object-fit: contain;
            transition: transform .4s cubic-bezier(.25,.46,.45,.94), opacity .35s ease;
            display: block;
            position: relative; z-index: 2;
            opacity: 0;
        }
        .htc-card__img.img-shown { opacity: 1; }
        .htc-card:hover .htc-card__img { transform: scale(1.06); }

        /* Banner image shimmer */
        .htc-banner-item { position: relative; overflow: hidden; }
        .htc-banner-item::before {
            content: '';
            position: absolute; inset: 0;
            background: linear-gradient(90deg, #f1f5f9 25%, #e8ecf1 37%, #f1f5f9 63%);
            background-size: 400% 100%;
            animation: htcShimmerBg 1.4s ease infinite;
            z-index: 1;
            transition: opacity .3s ease;
        }
        .htc-banner-item.img-ready::before { opacity: 0; pointer-events: none; }
        .htc-banner-item img {
            z-index: 2;
            opacity: 0; transition: opacity .35s ease;
        }
        .htc-banner-item img.img-shown { opacity: 1; }

        /* Quick action overlay on image */
        .htc-card-overlay {
            position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(15,23,42,.78) 0%, rgba(15,23,42,.18) 46%, transparent 72%);
            border-radius: 12px 12px 0 0;
            opacity: 0;
            z-index: 3;
            transition: opacity .25s;
            display: flex;
            align-items: flex-end;
            justify-content: stretch;
            padding: 12px;
        }
        .htc-card:hover .htc-card-overlay,
        .htc-slide-card:hover .htc-card-overlay { opacity: 1; }
        .htc-card-overlay-panel {
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
            z-index: 4;
            padding: 10px;
            background: linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,.5));
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 12px;
            backdrop-filter: blur(8px);
            box-shadow: 0 10px 24px rgba(15,23,42,.18);
        }
        .htc-overlay-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }
        .htc-overlay-grid.is-single {
            grid-template-columns: minmax(0, 1fr);
        }
        .htc-overlay-btn {
            min-width: 0;
            min-height: 40px;
            background: rgba(255,255,255,.96); color: var(--navy);
            border: none; border-radius: 10px;
            padding: 8px 8px; font-size: 11px; font-weight: 800;
            line-height: 1.1; text-align: center;
            white-space: nowrap;
            cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            transition: background .2s, color .2s, transform .15s, box-shadow .2s;
            transform: translateY(8px);
            box-shadow: 0 8px 18px rgba(15,23,42,.16);
        }
        .htc-card:hover .htc-overlay-btn,
        .htc-slide-card:hover .htc-overlay-btn { transform: translateY(0); }
        .htc-overlay-btn.is-red { background: var(--red); color: #fff; }
        .htc-overlay-btn:hover { transform: translateY(0) scale(1.02) !important; }
        .htc-overlay-btn.is-red:hover { background: var(--red2); }
        .htc-overlay-btn svg,
        .htc-overlay-sm svg { flex-shrink: 0; }

        @media (max-width: 767px) {
            .htc-card-overlay { padding: 10px; }
            .htc-card-overlay-panel { padding: 8px; gap: 6px; }
            .htc-overlay-grid { grid-template-columns: minmax(0, 1fr); }
            .htc-overlay-btn,
            .htc-overlay-sm {
                font-size: 11px;
                min-height: 36px;
            }
        }

        /* Badge */
        .htc-badge {
            position: absolute; top: 8px; left: 8px;
            background: var(--red); color: #fff;
            font-size: 11px; font-weight: 700; padding: 2px 9px;
            border-radius: 20px; z-index: 2; letter-spacing: .02em;
        }
        .htc-badge-new {
            position: absolute; top: 8px; right: 8px;
            background: var(--green); color: #fff;
            font-size: 10px; font-weight: 700; padding: 2px 7px;
            border-radius: 20px; z-index: 2;
        }

        /* Card body */
        .htc-card__body {
            padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 5px;
            border-radius: 0 0 13px 13px;          /* round bottom corners inside border */
        }
        .htc-card__name {
            font-size: .8125rem; font-weight: 600; color: var(--text);
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; line-height: 1.5;
            text-decoration: none; transition: color .15s;
        }
        .htc-card__name:hover { color: var(--red); }
        .htc-card__footer {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; margin-top: auto; padding-top: 8px;
            border-top: 1px solid #f1f5f9;
        }
        .htc-card__price { font-size: 1.0625rem; font-weight: 800; color: var(--red); line-height: 1; }
        .htc-card__price--old { font-size: .75rem; color: #94a3b8; text-decoration: line-through; margin-top: 1px; }

        /* Stock badge */
        .htc-stock-ok  { font-size: 10px; color: var(--green); font-weight: 600; }
        .htc-stock-out { font-size: 10px; color: #94a3b8;      font-weight: 600; }

        /* ============================================================
           TOOLTIP — Pure CSS hover (no JS dependency)
           Replaces display:none JS mechanism with opacity/visibility
           ============================================================ */
        /* ============================================================
           TOOLTIP — position:fixed + teleport ra body
           Khong bi cat boi overflow:hidden cua bat ky container nao
           ============================================================ */
        .tooltip-pro {
            position: fixed !important;
            width: 300px !important;
            background: #fff !important;
            border-radius: 14px !important;
            overflow-x: hidden !important;
            overflow-y: auto !important;
            box-shadow: 0 16px 48px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05) !important;
            z-index: 99999 !important;
            display: none !important;
            pointer-events: none;
        }
        .tooltip-pro.is-visible {
            display: block !important;
            pointer-events: auto !important;
            animation: htc-tooltip-in .2s ease forwards;
        }
        @keyframes htc-tooltip-in {
            from { opacity: 0; transform: translateX(6px) scale(.97); }
            to   { opacity: 1; transform: translateX(0) scale(1); }
        }
        .slick-slide {
            position: relative;
            z-index: 0;
        }

        /* Tooltip inner */
        .htc-tooltip-header {
            background: linear-gradient(135deg, var(--red) 0%, #f87171 100%);
            padding: 13px 16px; color: #fff;
            font-size: .8125rem; font-weight: 700; line-height: 1.45;
        }
        .htc-tooltip-price-row {
            display: flex; align-items: center; justify-content: space-between;
            padding: 10px 16px; background: #fef2f2;
            border-bottom: 1px solid #fecaca;
        }
        .htc-tooltip-price { font-size: 1.1875rem; font-weight: 900; color: var(--red); }
        .htc-tooltip-price-old { font-size: .75rem; color: #94a3b8; text-decoration: line-through; }
        .htc-tooltip-section-title {
            display: flex; align-items: center; gap: 6px;
            font-size: .75rem; font-weight: 700; color: var(--text);
            padding: 10px 16px 4px; margin: 0;
            text-transform: uppercase; letter-spacing: .04em;
        }
        .htc-tooltip-section-title svg { color: var(--red); flex-shrink: 0; }
        .htc-tick-list { list-style: none; padding: 4px 16px 12px; margin: 0; }
        .htc-tick-list li, .htc-tick-list p {
            position: relative; padding-left: 18px;
            font-size: .75rem; color: #374151; margin-bottom: 4px; line-height: 1.5;
        }
        .htc-tick-list li::before, .htc-tick-list p::before {
            content: ''; position: absolute; left: 0; top: 6px;
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--red);
        }
        .htc-tooltip-add-btn {
            display: flex; align-items: center; justify-content: center; gap: 7px;
            margin: 0 16px 14px;
            background: var(--red); color: #fff; border: none;
            padding: 9px; border-radius: 9px; font-size: .8125rem; font-weight: 700;
            cursor: pointer; width: calc(100% - 32px);
            transition: background .2s;
        }
        .htc-tooltip-add-btn:hover { background: var(--red2); }

        /* ============================================================
           ACTION BUTTONS — RED brand
           ============================================================ */
        .htc-btn-add {
            display: flex; align-items: center; justify-content: center; gap: 5px;
            background: var(--red); color: #fff; border: none;
            padding: 7px 14px; border-radius: 9px;
            font-size: .8125rem; font-weight: 700; cursor: pointer;
            transition: background .2s, transform .15s; white-space: nowrap;
        }
        .htc-btn-add:hover { background: var(--red2); transform: scale(1.04); }
        .htc-btn-add-icon {
            width: 34px; height: 34px;
            background: var(--red); color: #fff; border: none;
            border-radius: 9px; display: flex; align-items: center; justify-content: center;
            cursor: pointer; flex-shrink: 0;
            transition: background .2s, transform .15s;
            box-shadow: 0 2px 8px rgba(224,28,53,.3);
        }
        .htc-btn-add-icon:hover { background: var(--red2); transform: scale(1.1); }
        .htc-btn-contact {
            display: inline-flex; align-items: center;
            background: #fef2f2; color: var(--red);
            padding: 6px 10px; border-radius: 8px;
            font-size: .75rem; font-weight: 600; text-decoration: none;
            transition: background .2s, transform .15s;
        }
        .htc-btn-contact:hover { background: #fee2e2; transform: scale(1.03); }

        @media (max-width: 640px) {
            .htc-card__footer,
            .htc-slide-card__footer {
                gap: 8px;
                align-items: flex-end;
            }
            .htc-footer-actions {
                gap: 4px;
            }
            .htc-wl-btn,
            .htc-footer-actions .htc-cmp-btn,
            .htc-btn-add-icon {
                width: 32px;
                height: 32px;
                border-radius: 8px;
            }
            .htc-wl-btn svg,
            .htc-footer-actions .htc-cmp-btn svg,
            .htc-btn-add-icon svg {
                width: 14px;
                height: 14px;
            }
            .htc-btn-contact {
                padding: 6px 9px;
                border-radius: 8px;
                font-size: .6875rem;
            }
        }

        @media (max-width: 1024px), (hover: none), (pointer: coarse) {
            .tooltip-pro {
                display: none !important;
                visibility: hidden !important;
                pointer-events: none !important;
            }
        }

        /* ============================================================
           SLIDER CARD — htc-slide-card (homepage carousels)
           ============================================================ */
        .htc-slide-card {
            background: var(--card); border-radius: 12px;
            border: 1.5px solid #f1f5f9; margin: 4px 6px 2px;
            display: flex; flex-direction: column;
            transition: box-shadow .25s, transform .25s, border-color .2s;
            position: relative;
            overflow: visible;                      /* allow tooltip to escape card edges */
            z-index: 0;                             /* create stacking context at rest */
        }
        .htc-slide-card:hover {
            box-shadow: 0 8px 30px rgba(224,28,53,.14), 0 0 0 1.5px #fca5a5;
            transform: translateY(-5px);
            border-color: transparent;
            z-index: 200 !important;                /* dominate all siblings */
        }
        .htc-slide-card .htc-card-overlay {
            padding: 8px;
            border-radius: 11px 11px 0 0;
            align-items: stretch;
        }
        .htc-slide-card .htc-card-overlay-panel {
            margin-top: auto;
            padding: 8px;
            gap: 6px;
            border-radius: 10px;
            background: linear-gradient(180deg, rgba(15,23,42,.16), rgba(15,23,42,.58));
        }
        .htc-slide-card .htc-overlay-grid {
            grid-template-columns: minmax(0, 1fr);
            gap: 6px;
        }
        .htc-slide-card .htc-overlay-btn {
            min-height: 32px;
            padding: 6px 8px;
            font-size: 10px;
            gap: 4px;
            border-radius: 8px;
            letter-spacing: 0;
        }
        .htc-slide-card .htc-overlay-btn svg,
        .htc-slide-card .htc-overlay-sm svg {
            width: 11px;
            height: 11px;
        }
        .htc-slide-card .htc-overlay-actions {
            gap: 0;
        }
        .htc-slide-card .htc-overlay-sm {
            min-height: 30px;
            padding: 6px 8px;
            font-size: 10px;
            border-radius: 8px;
            gap: 4px;
        }
        .htc-slide-card__img-wrap {
            display: block; overflow: hidden;
            background: #f8fafc; position: relative;
            border-radius: 11px 11px 0 0;
            aspect-ratio: 1 / 1;                   /* square, scales with card width */
        }
        .htc-slide-card__img-inner {
            width: 100%; height: 100%; object-fit: contain;
            padding: 8px; transition: transform .4s cubic-bezier(.25,.46,.45,.94);
            display: block; position: absolute; top:0; left:0; right:0; bottom:0;
            max-width: 100%; max-height: 100%;
        }
        .htc-slide-card:hover .htc-slide-card__img-inner { transform: scale(1.08); }

        /* Overlay removed — no dark gradient on product image */

        .htc-slide-card__body { padding: 10px; flex: 1; display: flex; flex-direction: column; }
        .htc-slide-card__name {
            font-size: .75rem; font-weight: 600; color: var(--text);
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; line-height: 1.45; height: 2.9em;
            text-decoration: none; margin-bottom: 6px; transition: color .15s;
        }
        .htc-slide-card__name:hover { color: var(--red); }
        .htc-slide-card__footer {
            display: flex; align-items: center; justify-content: space-between;
            gap: 4px; margin-top: auto;
        }
        .htc-slide-card__price { font-size: .9375rem; font-weight: 800; color: var(--red); line-height: 1; }
        .htc-slide-card__price--old { font-size: .7rem; color: #94a3b8; text-decoration: line-through; }

        /* ============================================================
           SECTION BAND (Featured slider) — Modern White Design
           ============================================================ */
        .htc-band {
            background: #fff;
            border-radius: 16px;
            padding: 10px 20px 8px;
            margin: 8px 0;
            border: 1.5px solid #f0f0f0;
            box-shadow: 0 2px 20px rgba(0,0,0,.06);
            position: relative;
            overflow: visible;                      /* allow tooltip to escape band edges */
        }
        .htc-band::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            border-radius: 16px 16px 0 0;
            background: linear-gradient(90deg, var(--red) 0%, #ff8a8a 50%, var(--red) 100%);
        }
        .htc-band .htc-section-wrap {
            padding-top: 4px;
        }
        .htc-band .htc-section-title {
            color: var(--text);
            font-size: 1.25rem;
        }
        .htc-band .htc-section-title::before {
            background: var(--red);
            height: 26px;
            width: 5px;
            border-radius: 3px;
        }
        .htc-band .htc-section-line { background: linear-gradient(90deg, var(--red), transparent); }
        .htc-band .htc-filter-tab {
            background: #f8fafc;
            color: #475569;
            border-color: #e2e8f0;
        }
        .htc-band .htc-filter-tab:hover,
        .htc-band .htc-filter-tab.active {
            background: var(--red);
            color: #fff;
            border-color: var(--red);
            box-shadow: 0 3px 10px rgba(224,28,53,.3);
        }
        .htc-band .htc-filter-view-all {
            background: #fff1f2;
            color: var(--red);
            border-color: #fecaca;
            font-weight: 700;
        }
        .htc-band .htc-filter-view-all:hover {
            background: var(--red);
            color: #fff;
        }

        /* Alternate band styles — subtle background variation only */
        .htc-band--alt {
            background: #fafbfc;
        }

        /* ============================================================
           SLIDER ARROWS
           ============================================================ */
        .htc-slider-wrap { position: relative; }
        .htc-slider-wrap .slick-prev,
        .htc-slider-wrap .slick-next {
            width: 34px; height: 34px;
            background: #fff; border: 1.5px solid var(--border);
            border-radius: 50%; display: flex !important; align-items: center; justify-content: center;
            z-index: 10; transition: background .2s, border-color .2s;
            box-shadow: 0 2px 10px rgba(0,0,0,.12);
        }
        .htc-slider-wrap .slick-prev:hover,
        .htc-slider-wrap .slick-next:hover { background: var(--red); border-color: var(--red); }
        .htc-slider-wrap .slick-prev::before,
        .htc-slider-wrap .slick-next::before { font-size: 14px; opacity: 1; color: var(--text); }
        .htc-slider-wrap .slick-prev:hover::before,
        .htc-slider-wrap .slick-next:hover::before { color: #fff; }
        .htc-slider-wrap .slick-prev { left: -17px; }
        .htc-slider-wrap .slick-next { right: -17px; }

        /* ============================================================
           BANNER HOVER
           ============================================================ */
        .htc-banner-item { overflow: hidden; border-radius: 10px; display: block; }
        .htc-banner-item img { transition: transform .38s cubic-bezier(.25,.46,.45,.94); }
        .htc-banner-item:hover img { transform: scale(1.05); }

        /* ============================================================
           WHY CHOOSE US — Storytelling Section
           ============================================================ */
        .htc-why-section {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 18px;
            padding: 48px 40px;
            color: #f1f5f9;
        }
        .htc-why-header { text-align: center; margin-bottom: 36px; }
        .htc-why-label {
            display: inline-block;
            font-size: 11px; font-weight: 700;
            text-transform: uppercase; letter-spacing: 2px;
            color: #94a3b8; margin-bottom: 8px;
        }
        .htc-why-title {
            font-size: 28px; font-weight: 800;
            color: #fff; margin: 0 0 6px; letter-spacing: -.02em;
        }
        .htc-why-sub {
            font-size: 14px; color: #94a3b8; margin: 0;
            font-weight: 400;
        }
        .htc-why-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }
        .htc-why-card {
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.08);
            border-radius: 14px;
            padding: 28px 22px;
            transition: background .25s, border-color .25s;
        }
        .htc-why-card:hover {
            background: rgba(255,255,255,.10);
            border-color: rgba(255,255,255,.18);
        }
        .htc-why-num {
            font-size: 32px; font-weight: 800;
            color: rgba(255,255,255,.10); letter-spacing: -.03em;
            margin-bottom: 12px; line-height: 1;
        }
        .htc-why-card-title {
            font-size: 15px; font-weight: 700;
            color: #fff; margin: 0 0 8px;
        }
        .htc-why-card-desc {
            font-size: 13px; line-height: 1.6;
            color: #94a3b8; margin: 0;
        }
        @media (max-width: 991px) {
            .htc-why-grid { grid-template-columns: repeat(2, 1fr); }
            .htc-why-section { padding: 32px 24px; }
        }
        @media (max-width: 575px) {
            .htc-why-grid { grid-template-columns: 1fr; }
            .htc-why-section { padding: 28px 16px; }
            .htc-why-title { font-size: 22px; }
        }

        /* ============================================================
           TRUST SECTION (replaces old testimonials + trust bar)
           ============================================================ */
        .htc-trust-section {
            background: transparent;
            border: none;
            padding: 10px 0 0;
        }
        .htc-trust-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            background: #1a1a1a;
            border-top: 3px solid var(--red);
            border-bottom: 1px solid rgba(255,255,255,.06);
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 10px 28px rgba(15,23,42,.12);
        }
        @media (max-width: 767px) {
            .htc-trust-grid { grid-template-columns: repeat(2, 1fr); }
        }
        .htc-trust-card {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 18px;
            border-right: 1px solid rgba(255,255,255,.07);
            transition: background .18s;
        }
        .htc-trust-card:last-child { border-right: none; }
        .htc-trust-card:hover { background: rgba(255,255,255,.04); }
        @media (max-width: 767px) {
            .htc-trust-card:nth-child(2) { border-right: none; }
            .htc-trust-card { border-bottom: 1px solid rgba(255,255,255,.07); }
            .htc-trust-card:last-child, .htc-trust-card:nth-last-child(2) { border-bottom: none; }
        }
        .htc-trust-icon-wrap {
            width: 40px; height: 40px; flex-shrink: 0;
            background: rgba(224,28,53,.14);
            border: 1px solid rgba(224,28,53,.28);
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
        }
        .htc-trust-icon-wrap svg { width: 20px; height: 20px; }
        .htc-trust-body .htc-trust-title { font-size: .8125rem; font-weight: 700; line-height: 1.25; color: #f1f5f9; }
        .htc-trust-body .htc-trust-sub   { font-size: .6875rem; line-height: 1.3; color: #94a3b8; margin-top: 1px; }

        /* ============================================================
           FOOTER v2 — Dark Mode Professional
              3 sections: Showroom | Links | Copyright
           + Floating Social Buttons (fixed)
           ============================================================ */

        /* — Base — */
        .htc-footer { background: #141414; color: #a0a0a0; position: relative; }
        .htc-footer a { color: #a0a0a0; text-decoration: none; transition: color .18s; }
        .htc-footer a:hover { color: #fff; }

        /* — Section 1: Showroom — */
        .htc-sr-section {
            background: #1a1a1a;
            border-top: 3px solid var(--red);
            border-bottom: 1px solid #2a2a2a;
            margin-top: 24px;
            padding: 26px 0;
        }
        .htc-sr-head {
            text-align: center; margin-bottom: 20px;
            display: flex; align-items: center; justify-content: center; gap: 14px;
        }
        .htc-sr-head-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, #3a3a3a); max-width: 160px; }
        .htc-sr-head-line:last-child { background: linear-gradient(to left, transparent, #3a3a3a); }
        .htc-sr-head-title {
            color: #f1f5f9; font-size: 1.125rem; font-weight: 800; white-space: nowrap;
            display: flex; align-items: center; gap: 8px;
        }
        .htc-sr-head-title svg { color: var(--red); }

        /* Showroom grid: 2 desktop columns → 1 mobile column */
        .htc-sr-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            align-items: start;
        }
        @media (max-width: 767px) { .htc-sr-grid { grid-template-columns: 1fr; } }

        /* Showroom number badge */
        .htc-sr-badge-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
        .htc-sr-num {
            width: 38px; height: 38px; background: var(--red);
            border-radius: 9px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.125rem; font-weight: 900; color: #fff;
            box-shadow: 0 4px 14px rgba(224,28,53,.35);
        }
        .htc-sr-type { font-size: 10px; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
        .htc-sr-name { font-size: .9rem; font-weight: 900; color: #f87171; line-height: 1.3; }

        /* Showroom contact list */
        .htc-sr-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
        .htc-sr-list li { display: flex; align-items: flex-start; gap: 10px; }
        .htc-sr-ico {
            width: 30px; height: 30px; border-radius: 8px;
            background: rgba(224,28,53,.1); border: 1px solid rgba(224,28,53,.22);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; color: var(--red); margin-top: 1px;
        }
        .htc-sr-row { font-size: .8rem; color: #a0a0a0; line-height: 1.45; }
        .htc-sr-row strong { color: #e8e8e8; font-weight: 600; display: block; font-size: .7875rem; }
        .htc-sr-row a { color: #f9a8d4; font-weight: 700; }
        .htc-sr-row a:hover { color: var(--red); }
        .htc-sr-row.htc-sr-hotline strong { color: #fca5a5 !important; }
        .htc-sr-row.htc-sr-hotline a,
        .htc-sr-row.htc-sr-hotline a:visited,
        .htc-sr-row.htc-sr-hotline a:active { color: #f9a8d4 !important; }
        .htc-sr-row.htc-sr-hotline a:hover { color: var(--red) !important; }

        /* Map iframe */
        .htc-sr-map { border-radius: 14px; overflow: hidden; border: 2px solid #2a2a2a; height: 240px; }
        .htc-sr-map iframe { width: 100%; height: 100%; border: 0; display: block; }

        /* — Section 2: Footer links — */
        .htc-fl-section { padding: 44px 0 30px; }
        .htc-fl-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 28px 36px;
        }
        @media (max-width: 1023px) { .htc-fl-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 599px)  { .htc-fl-grid { grid-template-columns: 1fr; } }

        .htc-fl-title {
            color: #f0f0f0; font-weight: 700; font-size: .875rem;
            margin-bottom: 14px; padding-bottom: 9px;
            border-bottom: 1px solid #2a2a2a;
            display: flex; align-items: center; gap: 7px;
        }
        .htc-fl-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--red); flex-shrink: 0;
        }

        /* Blade menu.footer override */
        .htc-footer .menu-footer { list-style: none; padding: 0; margin: 0; }
        .htc-footer .menu-footer li { margin-bottom: 0; }
        .htc-footer .menu-footer a {
            font-size: .8125rem; color: #a0a0a0;
            display: flex; align-items: center; gap: 7px;
            padding: 4px 0; transition: color .14s, padding-left .14s;
        }
        .htc-footer .menu-footer a::before {
            content: '›'; color: #484848; font-size: 1.1rem; line-height: 1; transition: color .14s;
        }
        .htc-footer .menu-footer a:hover { color: #fff; padding-left: 5px; }
        .htc-footer .menu-footer a:hover::before { color: var(--red); }

        /* Fallback static link lists */
        .htc-fl-links { list-style: none; padding: 0; margin: 0; }
        .htc-fl-links a {
            font-size: .8125rem; color: #a0a0a0;
            display: flex; align-items: center; gap: 7px;
            padding: 4px 0; transition: color .14s, padding-left .14s;
        }
        .htc-fl-links a::before { content: '›'; color: #484848; font-size: 1.1rem; line-height: 1; transition: color .14s; }
        .htc-fl-links a:hover { color: #fff; padding-left: 5px; }
        .htc-fl-links a:hover::before { color: var(--red); }

        /* — Copyright bar — */
        .htc-footer-copy {
            background: #0a0a0a;
            border-top: 1px solid #2a2a2a;
            padding: 16px 0;
            font-size: 11.5px; color: #585858;
        }
        .htc-footer-copy a { color: #686868; }
        .htc-footer-copy a:hover { color: var(--red); }
        .htc-copy-inner {
            display: flex; align-items: center;
            justify-content: space-between; flex-wrap: wrap; gap: 8px;
        }
        .htc-copy-badges { display: flex; align-items: center; gap: 10px; }
        .htc-copy-badge {
            display: inline-flex; align-items: center; gap: 5px;
            border: 1px solid #2a2a2a; border-radius: 6px;
            padding: 3px 9px; font-size: 11px; color: #585858;
        }

        /* — Floating Social Buttons — */
        .htc-float-social {
              position: fixed; left: 14px; bottom: 88px;
            display: flex; flex-direction: column; gap: 10px;
            z-index: 9990;
        }
        .htc-float-btn {
            width: 48px; height: 48px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            text-decoration: none; color: #fff;
            box-shadow: 0 4px 14px rgba(0,0,0,.38);
            transition: transform .2s, box-shadow .2s;
            position: relative;
        }
        .htc-float-btn:hover { transform: scale(1.12); box-shadow: 0 6px 22px rgba(0,0,0,.48); color: #fff !important; }
        .htc-float-btn--fb   { background: #1877f2; }
        .htc-float-btn--zalo { background: #0068ff; }
        .htc-float-btn--tel  { background: #f59e0b; }

        /* Tooltip */
        .htc-float-btn::after {
            content: attr(data-tip);
            position: absolute; left: calc(100% + 10px);
            background: #1e293b; color: #f1f5f9;
            font-size: 11px; font-weight: 600; white-space: nowrap;
            padding: 4px 10px; border-radius: 6px;
            opacity: 0; pointer-events: none;
            transform: translateX(-6px); transition: opacity .18s, transform .18s;
        }
        .htc-float-btn:hover::after { opacity: 1; transform: translateX(0); }

        /* Pulse ring for the phone button */
        @keyframes htcRingPulse {
            0%   { box-shadow: 0 0 0 0   rgba(245,158,11,.6), 0 4px 14px rgba(0,0,0,.38); }
            65%  { box-shadow: 0 0 0 13px rgba(245,158,11,0),  0 4px 14px rgba(0,0,0,.38); }
            100% { box-shadow: 0 0 0 0   rgba(245,158,11,0),  0 4px 14px rgba(0,0,0,.38); }
        }
        .htc-float-btn--tel { animation: htcRingPulse 2.2s ease-in-out infinite; }
        .htc-float-btn--tel:hover { animation: none; }

        /* Scroll-to-top */
        .htc-scroll-top {
            width: 42px; height: 42px; border-radius: 50%;
            background: #1e293b; border: 1px solid #334155;
            display: flex; align-items: center; justify-content: center;
            color: #94a3b8; cursor: pointer; text-decoration: none;
            transition: background .2s, color .2s, transform .2s;
            align-self: center;
        }
        .htc-scroll-top:hover { background: var(--red); color: #fff; transform: translateY(-3px); }

        /* ============================================================
           MEGA MENU v2 — 3-Tier Design
           Left sidebar + Right content (subcategories → badges → banner)
           Flat design, rounded-xl, shadow-xl, smooth transitions
           ============================================================ */

        /* ---- Wrapper ---- */
        .htc-mega-wrap { position: relative; }

        /* Bridge the 6px gap between trigger and popup so hover doesn't break */
        .htc-mega-wrap::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            height: 8px;
        }

        /* Override external app.min.css */
        .htc-mega-wrap .menu-pc {
            display: flex !important;
            position: absolute !important;
            top: calc(100% + 6px) !important;
            left: 0 !important;
            width: 920px !important;
            padding: 0 !important;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 25px 60px rgba(0,0,0,.15), 0 4px 20px rgba(0,0,0,.06);
            border: 1px solid #f1f5f9;
            z-index: 9999 !important;
            opacity: 0;
            pointer-events: none;
            transform: translateY(8px);
            transition: all .2s ease;
            overflow: hidden;
            min-height: 380px;
        }
        .htc-mega-wrap:hover .menu-pc,
        .htc-mega-wrap .menu-pc.is-open {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }

        /* ---- LEFT SIDEBAR ---- */
        .htc-mega-left {
            width: 220px;
            max-height: 480px;
            background: #fafbfc;
            border-right: 1px solid #f1f5f9;
            padding: 8px 0;
            flex-shrink: 0;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .htc-mega-left::-webkit-scrollbar { display: none; }

        .htc-mega-group-label {
            padding: 10px 16px 6px;
            font-size: 11.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: #94a3b8;
        }

        .htc-mega-cat {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 10px 7px 14px;
            cursor: pointer;
            text-decoration: none;
            border-right: 3px solid transparent;
            transition: all .2s ease;
        }
        .htc-mega-cat:hover,
        .htc-mega-cat.is-active {
            background: #fef2f2;
            border-right-color: var(--red);
        }

        .htc-mega-cat-icon {
            width: 32px; height: 32px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
            color: #94a3b8;
            transition: all .2s ease;
        }
        .htc-mega-cat:hover .htc-mega-cat-icon,
        .htc-mega-cat.is-active .htc-mega-cat-icon {
            color: var(--red);
        }

        .htc-mega-cat-name {
            font-size: 14.5px; font-weight: 600; color: #334155;
            flex: 1; line-height: 1.3;
            transition: all .2s ease;
        }
        .htc-mega-cat:hover .htc-mega-cat-name,
        .htc-mega-cat.is-active .htc-mega-cat-name {
            color: #991b1b;
        }

        .htc-mega-cat-arr {
            color: #cbd5e1; flex-shrink: 0;
            transition: all .2s ease;
            opacity: 0;
        }
        .htc-mega-cat:hover .htc-mega-cat-arr,
        .htc-mega-cat.is-active .htc-mega-cat-arr {
            color: var(--red); opacity: 1; transform: translateX(2px);
        }

        /* ---- RIGHT CONTENT AREA ---- */
        .htc-mega-right { flex: 1; min-width: 0; position: relative; }

        .htc-mega-panel {
            display: none; padding: 20px 22px 16px;
            flex-direction: column; gap: 0;
            animation: htcPanelFade .15s ease;
        }
        .htc-mega-panel.is-active { display: flex; }
        @keyframes htcPanelFade { from { opacity:0; } to { opacity:1; } }

        .htc-mega-panel-head {
            display: flex; align-items: center; gap: 10px;
            padding-bottom: 14px; border-bottom: 1px solid #f1f5f9;
            margin-bottom: 16px;
        }
        .htc-mega-panel-title {
            font-size: 16.5px; font-weight: 800; color: var(--text);
        }
        .htc-mega-panel-viewall {
            font-size: 13px; color: var(--red); font-weight: 600;
            text-decoration: none; margin-left: auto;
            display: inline-flex; align-items: center; gap: 4px;
            padding: 5px 12px; border-radius: 20px;
            background: #fef2f2;
            transition: all .2s ease;
        }
        .htc-mega-panel-viewall:hover {
            background: var(--red); color: #fff;
        }

        /* ---- Panel body: main + banner ---- */
        .htc-mega-body {
            display: flex; gap: 16px; flex: 1;
        }
        .htc-mega-main { flex: 1; min-width: 0; }

        /* ---- TIER 1: Sub-categories ---- */
        .htc-mega-tier1 {
            display: flex; flex-wrap: wrap; gap: 6px;
            margin-bottom: 16px;
        }
        .htc-mega-subcat {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 14px;
            border-radius: 10px;
            font-size: 14.5px; font-weight: 600; color: #334155;
            text-decoration: none;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all .2s ease;
        }
        .htc-mega-subcat-dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: #cbd5e1;
            transition: all .2s ease;
        }
        .htc-mega-subcat-arrow {
            opacity: 0; margin-left: -4px;
            transition: all .2s ease;
        }
        .htc-mega-subcat:hover {
            background: #fef2f2; color: var(--red);
            border-color: #fecaca;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(224,28,53,.1);
        }
        .htc-mega-subcat:hover .htc-mega-subcat-dot { background: var(--red); }
        .htc-mega-subcat:hover .htc-mega-subcat-arrow { opacity: 1; margin-left: 0; color: var(--red); }

        /* ---- TIER 2: Property badges ---- */
        .htc-mega-tier2 {
            columns: 3; column-gap: 16px;
        }
        .htc-mega-prop-group {
            break-inside: avoid;
            margin-bottom: 14px;
        }
        .htc-mega-prop-label {
            font-size: 12.5px; font-weight: 700;
            text-transform: uppercase; letter-spacing: .05em;
            color: var(--red); margin-bottom: 4px;
        }
        .htc-mega-prop-badges {
            display: flex; flex-direction: column; gap: 1px;
        }
        .htc-mega-badge {
            display: flex; align-items: center; gap: 6px;
            padding: 4px 6px;
            border-radius: 5px;
            font-size: 13.5px; font-weight: 500; color: #374151;
            text-decoration: none;
            transition: all .15s ease;
        }
        .htc-mega-badge::before {
            content: '';
            display: inline-block;
            width: 4px; height: 4px;
            border-radius: 50%;
            background: #cbd5e1;
            flex-shrink: 0;
            transition: background .15s;
        }
        .htc-mega-badge:hover {
            background: #fef2f2; color: var(--red);
        }
        .htc-mega-badge:hover::before {
            background: var(--red);
        }

        /* ---- Empty state ---- */
        .htc-mega-empty {
            padding: 32px 0; display: flex;
            flex-direction: column; align-items: center; gap: 10px;
        }
        .htc-mega-empty-btn {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--red); color: #fff;
            font-size: 13px; font-weight: 700;
            padding: 10px 22px; border-radius: 12px;
            text-decoration: none;
            transition: all .2s ease;
        }
        .htc-mega-empty-btn:hover {
            background: #991b1b;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(224,28,53,.25);
        }

        /* ---- TIER 3: Mini banner ---- */
        .htc-mega-banner { width: 150px; flex-shrink: 0; }
        .htc-mega-banner-inner {
            background: linear-gradient(145deg, #1a0608 0%, #4a0e18 55%, var(--red) 100%);
            border-radius: 14px; padding: 18px 14px;
            display: flex; flex-direction: column; gap: 6px; height: 100%;
        }
        .htc-mega-banner-tag {
            background: var(--red); color: #fff;
            font-size: 9px; font-weight: 800; letter-spacing: .1em;
            padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
            align-self: flex-start;
        }
        .htc-mega-banner-title {
            font-size: 12px; font-weight: 500; color: #e2e8f0;
            line-height: 1.5; margin-top: 6px;
        }
        .htc-mega-banner-title strong {
            color: #fbbf24; font-weight: 800; display: block;
            font-size: 15px; margin-bottom: 2px;
        }
        .htc-mega-banner-cta {
            margin-top: auto; background: rgba(255,255,255,.15); color: #fff;
            font-size: 11px; font-weight: 700;
            padding: 7px 12px; border-radius: 10px;
            text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
            transition: all .2s ease; white-space: nowrap;
        }
        .htc-mega-banner-cta:hover { background: rgba(255,255,255,.3); }

        /* ---- Old classes kept for backward compat ---- */
        .htc-mega-left-head { display: none; }
        .htc-mega-sub-cols,
        .htc-mega-col-title,
        .htc-mega-sub-link,
        .htc-mega-content { display: none; }

        /* ---- Compact variant for sticky header ---- */
        .htc-mega-wrap--compact .menu-pc {
            left: 0 !important;
            min-height: 380px !important;
        }
        .htc-mega-compact-item {
            display: flex; align-items: center; gap: 10px;
            padding: 9px 16px;
            font-size: .8125rem; font-weight: 600; color: var(--text);
            text-decoration: none;
            border-left: 3px solid transparent;
            transition: background .14s, color .14s, border-color .14s;
        }
        .htc-mega-compact-item:hover { background: #fff1f2; color: var(--red); border-left-color: var(--red); }
        .htc-mega-compact-sep {
            height: 1px; background: #f1f5f9; margin: 4px 0;
        }

        /* ---- Chevron rotation when the menu is open ---- */
        .htc-mega-wrap:hover .htc-mega-chevron { transform: rotate(180deg); }
        .htc-mega-chevron { transition: transform .2s; }

        /* ---- Hide on mobile (desktop mega menu stays hidden) ---- */
        @media (max-width: 767px) {
            .htc-mega-wrap, .htc-mega-wrap--compact { display: none !important; }
        }

        /* ============================================================
           BUILD PC MODAL — v2 Pro
           ============================================================ */
        .htc-modal-overlay {
            position: fixed; inset: 0;
            background: rgba(10,10,20,.72);
            z-index: 99999; display: none; align-items: flex-start; justify-content: center;
            padding: 0; overflow-y: auto;
            backdrop-filter: blur(6px) saturate(.8);
        }
        .htc-modal-overlay.active { display: flex; }

        /* Dialog box */
        .bpc-dialog {
            background: #f4f4f6; width: 100%; min-height: 100vh;
            display: flex; flex-direction: column;
            animation: htc-fade-in .22s ease-out;
        }
        @media (min-width: 768px) {
            .bpc-dialog {
                min-height: unset; max-width: 1080px; min-height: 80vh;
                border-radius: 20px; margin: 32px auto;
                flex-direction: row; overflow: hidden;
                box-shadow: 0 40px 100px rgba(0,0,0,.35);
            }
        }

        /* ---- Left panel ---- */
        .bpc-left {
            flex: 1; min-width: 0;
            display: flex; flex-direction: column;
            background: #f4f4f6;
        }
        .bpc-head {
            background: linear-gradient(135deg, #1a0608 0%, #4a0e18 50%, #0f172a 100%);
            padding: 20px 24px;
            display: flex; align-items: center; justify-content: space-between;
            flex-shrink: 0;
        }
        .bpc-head-title {
            display: flex; align-items: center; gap: 12px;
            color: #fff; font-size: 1.1rem; font-weight: 800;
        }
        .bpc-head-icon {
            width: 40px; height: 40px; background: var(--red); border-radius: 10px;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .bpc-close {
            background: rgba(255,255,255,.15); border: none; color: #fff;
            width: 34px; height: 34px; border-radius: 50%;
            cursor: pointer; font-size: 20px; line-height: 1;
            display: flex; align-items: center; justify-content: center;
            transition: background .2s; flex-shrink: 0;
        }
        .bpc-close:hover { background: rgba(255,255,255,.3); }

        /* Presets bar */
        .bpc-presets {
            padding: 14px 20px;
            background: #fff;
            border-bottom: 1px solid #e8e8ec;
            display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
        }
        .bpc-preset-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
        .bpc-preset-btn {
            font-size: 12px; font-weight: 700; padding: 6px 14px;
            border-radius: 20px; border: 1.5px solid var(--border);
            background: #fff; color: var(--text); cursor: pointer;
            transition: all .18s; display: flex; align-items: center; gap: 5px;
            text-decoration: none;
        }
        .bpc-preset-btn:hover { background: var(--red); color: #fff; border-color: var(--red); transform: translateY(-1px); }
        .bpc-preset-btn.is-clear { border-color: #fecaca; color: var(--red); background: #fff1f2; }
        .bpc-preset-btn.is-clear:hover { background: var(--red); color: #fff; }

        /* Scrollable component list */
        .bpc-list {
            flex: 1; overflow-y: auto; padding: 16px 20px;
            display: flex; flex-direction: column; gap: 10px;
        }
        .bpc-list::-webkit-scrollbar { width: 4px; }
        .bpc-list::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 2px; }

        /* Component card */
        .bpc-card {
            background: #fff; border-radius: 14px;
            border: 1.5px solid #e8e8ec;
            padding: 14px 16px;
            display: flex; align-items: center; gap: 14px;
            transition: border-color .2s, box-shadow .2s;
        }
        .bpc-card:hover { border-color: #fca5a5; box-shadow: 0 4px 16px rgba(224,28,53,.08); }
        .bpc-card.is-selected { border-color: var(--red); }
        .bpc-card-icon {
            width: 48px; height: 48px; border-radius: 12px;
            background: #fff1f2; border: 1.5px solid #fecaca;
            display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .bpc-card-icon svg { color: var(--red); }
        .bpc-card-info { flex: 1; min-width: 0; }
        .bpc-card-name { font-size: .875rem; font-weight: 800; color: var(--text); line-height: 1.3; }
        .bpc-card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
        .bpc-card-chosen { font-size: 11.5px; font-weight: 600; color: var(--red); margin-top: 3px; display: none; }
        .bpc-card.is-selected .bpc-card-chosen { display: block; }
        .bpc-card-right {
            display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
            flex-shrink: 0;
        }
        .bpc-card-price {
            font-size: .9375rem; font-weight: 900; color: var(--red); white-space: nowrap;
        }
        .bpc-card-price.is-zero { color: #94a3b8; font-size: .8125rem; font-weight: 600; }
        .bpc-select {
            border: 1.5px solid var(--border); border-radius: 9px;
            padding: 7px 10px; font-size: .75rem; color: var(--text);
            background: #f8fafc; outline: none; min-width: 180px; max-width: 220px;
            transition: border-color .2s, background .2s; cursor: pointer;
        }
        .bpc-select:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(224,28,53,.1); }

        /* Export footer */
        .bpc-export {
            padding: 12px 20px;
            background: #fff;
            border-top: 1px solid #e8e8ec;
            display: flex; gap: 8px; flex-wrap: wrap;
        }
        .bpc-export-btn {
            font-size: 11.5px; font-weight: 700; padding: 7px 14px;
            border-radius: 9px; border: 1.5px solid var(--border);
            background: #fff; color: var(--text); cursor: pointer;
            display: flex; align-items: center; gap: 6px;
            transition: all .18s; text-decoration: none; white-space: nowrap;
        }
        .bpc-export-btn:hover { border-color: var(--red); color: var(--red); background: #fff1f2; }
        .bpc-export-btn span { font-size: 14px; }

        /* ---- Right sidebar ---- */
        .bpc-sidebar {
            width: 100%; background: var(--navy);
            display: flex; flex-direction: column; flex-shrink: 0;
            color: #fff;
        }
        @media (min-width: 768px) { .bpc-sidebar { width: 280px; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; } }

        .bpc-sidebar-head {
            padding: 24px 20px 16px;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .bpc-sidebar-head-title { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: #94a3b8; font-weight: 600; }
        .bpc-total-price {
            font-size: 2rem; font-weight: 900; color: #fff; line-height: 1.1; margin-top: 6px;
        }
        .bpc-total-sub { font-size: 11px; color: #64748b; margin-top: 4px; }

        /* Summary list */
        .bpc-summary {
            flex: 1; padding: 14px 16px;
            display: flex; flex-direction: column; gap: 6px;
        }
        .bpc-sum-row {
            display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
            font-size: 11.5px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.06);
        }
        .bpc-sum-row:last-child { border-bottom: none; }
        .bpc-sum-name { color: #94a3b8; font-weight: 500; flex-shrink: 0; }
        .bpc-sum-val { color: #fff; font-weight: 700; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
        .bpc-sum-val.is-empty { color: #475569; font-weight: 400; }

        /* CTA buttons */
        .bpc-cta {
            padding: 16px 16px 20px;
            display: flex; flex-direction: column; gap: 8px;
        }
        .bpc-cta-primary {
            background: var(--red); color: #fff; border: none;
            padding: 13px 20px; border-radius: 11px;
            font-size: .9375rem; font-weight: 800; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: background .2s, transform .15s; text-decoration: none;
            width: 100%;
        }
        .bpc-cta-primary:hover { background: var(--red2); transform: translateY(-1px); }
        .bpc-cta-secondary {
            background: rgba(255,255,255,.08); color: #e2e8f0; border: 1px solid rgba(255,255,255,.12);
            padding: 10px 20px; border-radius: 11px;
            font-size: .8125rem; font-weight: 700; cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: background .2s; text-decoration: none; width: 100%;
        }
        .bpc-cta-secondary:hover { background: rgba(255,255,255,.15); }

        /* ============================================================
           RESPONSIVE
           ============================================================ */

        @media (max-width: 768px) {
            body { padding-top: 56px !important; }
            .htc-section-title { font-size: .9375rem; }
            .htc-card__price  { font-size: .9375rem; }

            /* Deal bar stacks vertically */
            .htc-deal-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
            .htc-deal-viewall { margin-left: 0; }

            /* PC config row stacks */
            .htc-pc-row { grid-template-columns: 1fr; gap: 6px; }
            .htc-pc-price { text-align: left; }

            /* Tooltip hidden on touch devices */
            .tooltip-pro { display: none !important; }

            /* Category icon grid — 3 cols on small phone */
            .htc-cat-icon-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
            .htc-cat-icon-img { width: 52px; height: 52px; }

            /* Deal flame label wraps nicely */
            .htc-deal-label-text { font-size: .9rem; }

            /* Sections horizontal padding */
            .max-w-8xl.mx-auto.px-4 { padding-left: 12px; padding-right: 12px; }

            /* Filter tabs scroll horizontally instead of wrapping messily */
            .htc-filter-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
                               scrollbar-width: none; padding-bottom: 4px; }
            .htc-filter-tabs::-webkit-scrollbar { display: none; }
            .htc-filter-tab { flex-shrink: 0; }

            /* Product card name 2-line clamp */
            .htc-card__name { font-size: .75rem; }

            /* Subscribe form stacks on mobile */
            .htc-newsletter-section { padding: 18px 0 28px; }
            .htc-newsletter-card { padding: 22px 16px; border-radius: 18px; }
            .htc-newsletter-inner { gap: 18px; }
            .htc-newsletter-title { font-size: 1.45rem; }
            .htc-newsletter-sub { font-size: 14px; line-height: 1.65; }
            .htc-newsletter-points { gap: 8px; }
            .htc-newsletter-point { width: 100%; justify-content: center; border-radius: 12px; }
            .htc-newsletter-form-wrap { max-width: none; }
            .htc-subscribe-form { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; padding: 10px; border-radius: 14px; }
            .htc-subscribe-input { width: 100% !important; border-radius: 10px !important; }
            .htc-subscribe-btn { width: 100%; border-radius: 10px !important; }

            /* Trust grid 2 cols already handled, add padding */
            .htc-trust-card { padding: 16px 14px; }

            /* Footer links single col already handled, just gap */
            .htc-fl-grid { gap: 20px; }
            .htc-float-social { left: 10px; bottom: 72px; }
            .htc-float-btn { width: 42px; height: 42px; }

            /* Slider arrows hidden on touch */
            .htc-slider-wrap .slick-prev,
            .htc-slider-wrap .slick-next { display: none !important; }

            /* Section heading row wrap */
            .htc-section-wrap { flex-direction: column; align-items: flex-start; }

            /* BPC sidebar full width on mobile */
            .bpc-sidebar { position: static !important; width: 100% !important; max-height: none !important; }
            .bpc-card-right { flex-direction: column; align-items: flex-start; }
            .bpc-select { width: 100%; }
        }

        /* ---- Tablet (769px – 1023px) ---- */
        @media (min-width: 769px) and (max-width: 1023px) {
            .htc-cat-icon-row { grid-template-columns: repeat(6, 1fr); }
            .htc-deal-label-text { font-size: 1rem; }
            /* BPC sidebar sticky */
            .bpc-sidebar { width: 240px; }
        }

        /* Top progress bar + shimmer */
        #htc-loading-bar{position:fixed;top:0;left:0;width:0;height:3px;background:linear-gradient(90deg,#e01c35,#ff4d6a,#e01c35);background-size:200% 100%;z-index:99999;transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px rgba(224,28,53,.45);}
        #htc-loading-bar.active{animation:htcBarProgress 2.2s ease-in-out forwards,htcShimmer 1s linear infinite;}
        #htc-loading-bar.done{width:100%!important;opacity:0;transition:width .25s ease,opacity .35s ease .25s;}
        @keyframes htcBarProgress{0%{width:0}15%{width:18%}35%{width:42%}60%{width:62%}80%{width:78%}100%{width:93%}}
        @keyframes htcShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
        /* Full overlay + modern spinner */
        #htc-loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:99998;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .22s ease;}
        #htc-loading-overlay.active{opacity:1;pointer-events:auto;}
        .htc-spinner{display:flex;gap:6px;align-items:center;}
        .htc-spinner i{width:10px;height:10px;border-radius:50%;background:#e01c35;animation:htcBounce .6s ease-in-out infinite alternate;}
        .htc-spinner i:nth-child(2){animation-delay:.15s;opacity:.7;}
        .htc-spinner i:nth-child(3){animation-delay:.3s;opacity:.5;}
        @keyframes htcBounce{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-10px) scale(1.15)}}
        /* Page transition */
        body{opacity:1;transition:opacity .18s ease;}
        body.htc-leaving{opacity:.45;transition:opacity .15s ease;}
        /* Content entrance */
        @keyframes htcFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
        body.htc-entered main,body.htc-entered #main-content,body.htc-entered .main-wrap{animation:htcFadeUp .35s cubic-bezier(.16,1,.3,1) both;}

    /* ---------- LIVE CHAT WIDGET ---------- */
    .htc-chat-bubble{position:fixed;bottom:24px;right:24px;z-index:9999;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,#e01c35 0%,#c0172b 100%);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(224,28,53,.4);transition:transform .2s,box-shadow .2s}
    .htc-chat-bubble:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(224,28,53,.5)}
    .htc-chat-bubble svg{width:28px;height:28px}
    .htc-chat-badge{position:absolute;top:-4px;right:-4px;background:#0f172a;color:#fff;font-size:11px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff}
    .htc-chat-panel{position:fixed;bottom:96px;right:24px;z-index:9999;width:380px;max-height:520px;border-radius:16px;background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow:hidden;animation:htcChatSlideUp .25s ease}
    @keyframes htcChatSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
    .htc-chat-header{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);padding:16px 18px;display:flex;align-items:center;justify-content:space-between}
    .htc-chat-header-info{display:flex;align-items:center;gap:12px}
    .htc-chat-avatar{width:40px;height:40px;border-radius:50%;background:#e01c35;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
    .htc-chat-title{color:#fff;font-weight:700;font-size:15px}
    .htc-chat-status{color:#94a3b8;font-size:12px;display:flex;align-items:center;gap:5px}
    .htc-chat-dot{width:7px;height:7px;border-radius:50%;background:#22c55e;display:inline-block}
    .htc-chat-close{background:none;border:none;color:#94a3b8;font-size:24px;cursor:pointer;padding:0 4px;line-height:1}
    .htc-chat-close:hover{color:#fff}
    .htc-chat-intro{padding:24px 18px;text-align:center}
    .htc-chat-intro-text{font-size:14px;color:#475569;margin:0 0 16px;line-height:1.5}
    .htc-chat-input-field{width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;margin-bottom:10px;outline:none;transition:border-color .2s;box-sizing:border-box}
    .htc-chat-input-field:focus{border-color:#e01c35}
    .htc-chat-start-btn{width:100%;padding:11px;background:linear-gradient(135deg,#e01c35 0%,#c0172b 100%);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s}
    .htc-chat-start-btn:hover{opacity:.9}
    .htc-chat-body{flex:1;overflow-y:auto;padding:16px 18px;max-height:320px;background:#f8fafc}
    .htc-chat-messages{display:flex;flex-direction:column;gap:8px}
    .htc-chat-welcome{background:#e0e7ff;border-radius:12px;padding:12px 14px;font-size:13px;color:#3730a3;line-height:1.5}
    .htc-chat-welcome strong{color:#1e293b}
    .htc-chat-msg{max-width:80%;padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;word-break:break-word}
    .htc-chat-msg.customer{align-self:flex-end;background:linear-gradient(135deg,#e01c35,#c0172b);color:#fff;border-bottom-right-radius:4px}
    .htc-chat-msg.admin{align-self:flex-start;background:#fff;color:#1e293b;border:1px solid #e2e8f0;border-bottom-left-radius:4px}
    .htc-chat-msg-time{font-size:10px;opacity:.6;margin-top:4px;display:block}
    .htc-chat-footer{padding:12px 14px;border-top:1px solid #f1f5f9;background:#fff}
    .htc-chat-footer form{display:flex;gap:8px}
    .htc-chat-msg-input{flex:1;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:14px;outline:none;transition:border-color .2s}
    .htc-chat-msg-input:focus{border-color:#e01c35}
    .htc-chat-send-btn{width:40px;height:40px;border:none;background:linear-gradient(135deg,#e01c35,#c0172b);color:#fff;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .2s}
    .htc-chat-send-btn:hover{opacity:.85}
    .htc-chat-send-btn svg{width:18px;height:18px}
    .htc-chat-typing{align-self:flex-start;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:10px 16px;font-size:13px;color:#94a3b8}
    @media(max-width:480px){
        .htc-chat-panel{right:0;left:0;bottom:0;width:100%;max-height:100vh;border-radius:16px 16px 0 0}
        .htc-chat-body{max-height:calc(100vh - 200px)}
        .htc-chat-bubble{bottom:16px;right:16px;width:54px;height:54px}
        .htc-chat-bubble svg{width:24px;height:24px}
    }