@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700;800;900&display=swap');

/* =========================================
   THEME VIP - CLEAN FINAL
   FILE: public/assets/css/theme-vip.css
========================================= */

:root {
    --tm-bg: #000000;
    --tm-bg-soft: #050b08;
    --tm-card: linear-gradient(180deg, rgba(7, 18, 12, .97), rgba(4, 10, 7, .97));
    --tm-card-soft: linear-gradient(180deg, rgba(10, 22, 15, .96), rgba(6, 12, 9, .96));

    --tm-text: #ffffff;
    --tm-text-soft: #dce7df;
    --tm-text-muted: #8ea294;

    --tm-green: #22ff88;
    --tm-green-2: #12c768;
    --tm-green-soft: rgba(34, 255, 136, .10);
    --tm-green-border: rgba(34, 255, 136, .16);
    --tm-green-border-strong: rgba(34, 255, 136, .28);

    --tm-white-soft: rgba(255, 255, 255, .08);

    --tm-radius-xl: 24px;
    --tm-radius-lg: 18px;
    --tm-radius-md: 16px;
    --tm-radius-sm: 12px;

    --tm-shadow:
        0 16px 40px rgba(0, 0, 0, .42),
        0 0 0 1px rgba(34, 255, 136, .04);

    --tm-header-height: 78px;
    --tm-container: 1240px;
}

/* ========= RESET ========= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: #000;
}

body {
    margin: 0;
    min-height: 100vh;
    padding-top: var(--tm-header-height);
    overflow-x: hidden;
    position: relative;
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    color: var(--tm-text);
    background: #000 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    opacity: .62;
    background-image:
        radial-gradient(2px 2px at 10% 12%, rgba(255,255,255,.96), transparent 60%),
        radial-gradient(1px 1px at 22% 30%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(2px 2px at 35% 18%, rgba(255,255,255,.92), transparent 60%),
        radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,.86), transparent 60%),
        radial-gradient(1.5px 1.5px at 80% 24%, rgba(255,255,255,.88), transparent 60%);
    animation: tmStarsFast 14s linear infinite;
}

body::after {
    opacity: .36;
    background-image:
        radial-gradient(1px 1px at 8% 8%, rgba(255,255,255,.9), transparent 60%),
        radial-gradient(1px 1px at 32% 8%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.82), transparent 60%),
        radial-gradient(1px 1px at 82% 6%, rgba(255,255,255,.8), transparent 60%);
    animation: tmStarsSlow 24s linear infinite;
}

@keyframes tmStarsFast {
    from { transform: translate3d(0, -120px, 0); }
    to   { transform: translate3d(-120px, 100vh, 0); }
}

@keyframes tmStarsSlow {
    from { transform: translate3d(0, -160px, 0); }
    to   { transform: translate3d(-180px, 100vh, 0); }
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

.container {
    width: min(var(--tm-container), calc(100% - 18px));
    margin: 0 auto;
}

.site-shell,
.site-main,
main,
section,
.catalog-page,
.tool-detail-page {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6,
.logo, .title, .section-title {
    font-family: "Poppins", "Inter", sans-serif;
    letter-spacing: -.02em;
    color: #fff;
}

input,
textarea,
select {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    color: #fff;
    background: #0d120f;
    border: 1px solid rgba(255,255,255,.08);
    outline: none;
    transition: .18s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(34,255,136,.34);
    box-shadow: 0 0 0 4px rgba(34,255,136,.10);
    background: #121212;
}

button,
.btn,
input[type="submit"] {
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 800;
}

/* ========= SCROLLBAR ========= */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #090909;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #1eff86, #11924e);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #4dffaa, #16b05d);
}

/* ========= HEADER ========= */
.tm-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: var(--tm-header-height);
    z-index: 9999;
    background: linear-gradient(180deg, rgba(5,5,5,.97), rgba(9,9,9,.96));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(34,255,136,.10);
    box-shadow:
        0 10px 28px rgba(0,0,0,.35),
        0 0 0 1px rgba(34,255,136,.04);
}

.tm-header::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,255,136,.22), transparent);
}

.tm-header-inner {
    min-height: var(--tm-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.tm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.tm-brand-logo {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #101010, #171717);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow:
        0 0 0 1px rgba(34,255,136,.08),
        0 10px 24px rgba(0,0,0,.32),
        0 0 16px rgba(34,255,136,.08);
}

.tm-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tm-brand-text {
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.tm-brand-name {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "Poppins", "Inter", sans-serif;
    font-weight: 900;
    font-size: clamp(18px, 3vw, 36px);
    line-height: 1;
    letter-spacing: -0.06em;
    background: linear-gradient(180deg, #4dffaa 0%, #22ff88 48%, #12c768 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 2px rgba(34,255,136,.22),
        0 0 6px rgba(34,255,136,.12);
}

.tm-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tm-link-btn,
.tm-menu-toggle,
.tm-user-chip {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.07);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 10px 20px rgba(0,0,0,.18);
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.tm-link-btn:hover,
.tm-link-btn:focus-visible,
.tm-menu-toggle:hover,
.tm-menu-toggle:focus-visible,
.tm-user-chip:hover,
.tm-user-chip:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.85);
    background: #ffffff;
    color: #000000;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.45),
        0 8px 20px rgba(255,255,255,.16);
}

.tm-link-btn:active,
.tm-menu-toggle:active,
.tm-user-chip:active {
    transform: scale(.985);
}

.tm-link-btn-register,
.tm-link-btn.is-primary {
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%);
    color: #03110a;
    border-color: transparent;
    box-shadow:
        0 14px 30px rgba(34,255,136,.16),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.tm-link-btn-register:hover,
.tm-link-btn-register:focus-visible,
.tm-link-btn.is-primary:hover,
.tm-link-btn.is-primary:focus-visible {
    background: #ffffff;
    color: #000000;
}

.tm-menu-wrap {
    position: relative;
}

.tm-menu-toggle {
    min-width: 42px;
    padding: 0 12px;
}

.tm-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(310px, calc(100vw - 18px));
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(19,19,19,.99), rgba(10,10,10,.99));
    box-shadow:
        0 26px 54px rgba(0,0,0,.40),
        0 0 0 1px rgba(34,255,136,.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: .22s ease;
    z-index: 1000;
}

.tm-menu-wrap.is-open .tm-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tm-dropdown-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tm-dropdown-item {
    min-height: 48px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 14px;
    color: #f8fff9;
    border: 1px solid rgba(255,255,255,.05);
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.tm-dropdown-item:hover,
.tm-dropdown-item:focus-visible,
.tm-dropdown-item:active {
    transform: translateY(-1px);
    background: #ffffff;
    color: #000000;
    border-color: rgba(255,255,255,.85);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.45),
        0 8px 20px rgba(255,255,255,.16);
}

.tm-dropdown-item:hover *,
.tm-dropdown-item:focus-visible *,
.tm-dropdown-item:active * {
    color: #000000 !important;
}

/* ========= COMMON CARD ========= */
.vip-card,
.card,
.panel,
.catalog-hero,
.catalog-tabs,
.catalog-subtabs,
.hack-card,
.catalog-empty,
.tool-video-card,
.tool-info-card,
.tool-action-card {
    background: var(--tm-card);
    border: 1px solid var(--tm-green-border);
    border-radius: var(--tm-radius-xl);
    box-shadow: var(--tm-shadow);
}

/* ========= GLOBAL BUTTON EFFECT ========= */
.catalog-tab,
.catalog-subtab,
.catalog-subtab-parent,
.hack-buy-btn,
.hack-detail-btn,
.hack-guide-btn,
.home-category-enter-ui,
.btn,
button[type="submit"],
input[type="submit"],
.tool-link-item,
.pack-item,
.pack-selected,
.site-topnav-home,
.site-topnav-trigger,
.tool-buy-btn {
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.catalog-tab:active,
.catalog-subtab:active,
.catalog-subtab-parent:active,
.hack-buy-btn:active,
.hack-detail-btn:active,
.hack-guide-btn:active,
.home-category-enter-ui:active,
.btn:active,
button[type="submit"]:active,
input[type="submit"]:active,
.tool-link-item:active,
.pack-item:active,
.pack-selected:active,
.site-topnav-home:active,
.site-topnav-trigger:active,
.tool-buy-btn:active {
    transform: scale(.985) !important;
}

/* ========= TOP NAV / CHỌN NHANH ========= */
.site-topnav-wrap {
    position: relative;
    margin-bottom: 18px;
    z-index: 30;
    overflow: visible !important;
}

.site-topnav {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 12px;
    position: relative;
    z-index: 30;
    overflow: visible !important;
    width: 100%;
}

.site-topnav-dropdown {
    position: relative;
    overflow: visible !important;
    width: min(260px, calc(50% - 6px));
    min-width: 0;
}

.site-topnav-home,
.site-topnav-trigger {
    position: relative !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 46px;
    height: 46px;
    padding: 0 42px 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(34,255,136,.18);
    background: linear-gradient(180deg, #0d1712, #0a140f);
    color: #f1fff7;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 0 0 1px rgba(34,255,136,.03);
}

.site-topnav-label {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}

.site-topnav-caret {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,255,136,.10);
    border: 1px solid rgba(34,255,136,.18);
    font-size: 11px;
    line-height: 1;
    color: currentColor;
    margin-left: 0 !important;
}

.site-topnav-dropdown[open] .site-topnav-caret {
    transform: translateY(-50%) rotate(180deg) !important;
}

/* trigger thường: hover vẫn nền tối */
.site-topnav-home:hover,
.site-topnav-home:focus-visible,
.site-topnav-home:active,
.site-topnav-trigger:hover,
.site-topnav-trigger:focus-visible,
.site-topnav-trigger:active {
    background: linear-gradient(180deg, #0d1712, #0a140f) !important;
    color: #f1fff7 !important;
    border-color: rgba(34,255,136,.18) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 0 0 1px rgba(34,255,136,.03) !important;
}

/* trigger khi menu mở = xanh lá chữ trắng */
.site-topnav-dropdown[open] > .site-topnav-trigger {
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow:
        0 10px 24px rgba(34,255,136,.22),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-label,
.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-caret,
.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-caret i {
    color: #ffffff !important;
}

/* khi rê chuột vào trigger cũng giữ xanh lá */
.site-topnav-dropdown > .site-topnav-trigger:hover,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible,
.site-topnav-dropdown > .site-topnav-trigger:active {
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow:
        0 10px 24px rgba(34,255,136,.22),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-label,
.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-caret,
.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-caret i,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible .site-topnav-label,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible .site-topnav-caret,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible .site-topnav-caret i,
.site-topnav-dropdown > .site-topnav-trigger:active .site-topnav-label,
.site-topnav-dropdown > .site-topnav-trigger:active .site-topnav-caret,
.site-topnav-dropdown > .site-topnav-trigger:active .site-topnav-caret i {
    color: #ffffff !important;
}

.site-topnav-home:hover *,
.site-topnav-home:focus-visible *,
.site-topnav-home:active *,
.site-topnav-trigger:hover *,
.site-topnav-trigger:focus-visible *,
.site-topnav-trigger:active * {
    color: inherit !important;
}

.site-topnav-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 10px;
    border-radius: 18px;
    border: 1px solid rgba(34,255,136,.18);
    background: linear-gradient(180deg, rgba(9,18,13,.99), rgba(5,11,8,.99));
    box-shadow:
        0 18px 36px rgba(0,0,0,.35),
        0 0 0 1px rgba(34,255,136,.04);
    z-index: 200;
}

.site-topnav-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 12px;
    text-align: center;
    color: #effff4 !important;
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.site-topnav-menu-item:hover,
.site-topnav-menu-item:focus-visible,
.site-topnav-menu-item:active,
.site-topnav-menu-item.is-active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: rgba(255,255,255,.85) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.35),
        0 8px 20px rgba(255,255,255,.12) !important;
}

.site-topnav-menu-item:hover *,
.site-topnav-menu-item:focus-visible *,
.site-topnav-menu-item:active *,
.site-topnav-menu-item.is-active * {
    color: #000000 !important;
}

/* ========= PAGE CATALOG ========= */
.catalog-page {
    min-height: 100vh;
    padding: 20px 8px 28px;
    background: transparent !important;
}

.catalog-wrap {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    width: 100%;
}

.catalog-empty {
    padding: 28px 20px;
    color: #9ab8a4;
}

.hack-grid,
.home-category-sync-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 2 cột */
    gap: 18px;
}

.hack-card,
.home-category-card-ui,
.hack-card-sync {
    position: relative;
    border-radius: 22px;
    overflow: visible !important;
    z-index: 1;
}

.hack-card:hover,
.home-category-card-ui:hover {
    border-color: rgba(34,255,136,.22);
    box-shadow:
        0 12px 30px rgba(0,0,0,.45),
        0 0 0 1px rgba(34,255,136,.12),
        0 0 22px rgba(34,255,136,.12);
    z-index: 5;
}

.home-category-top-title,
.hack-card-sync .hack-card-top-title {
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    padding: 14px 12px;
    margin: 0;
    font-family: "Poppins", "Inter", sans-serif;
    color: #fff;
}

.hack-card-sync .hack-card-top-title a {
    display: block;
    color: #fff;
}

.hack-thumb-link {
    display: block;
    position: relative;
    text-decoration: none;
    border-radius: 0;
    overflow: hidden;
}

.hack-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    overflow: hidden;
    display: block;
}

img.hack-thumb {
    object-fit: cover;
}

.hack-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #86a793;
    font-weight: 700;
}

.hack-badge,
.home-category-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 6px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, #c8ff0b, #7eff00);
    color: #142000;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(200,255,11,.5);
}

.hack-body,
.home-category-body-ui {
    padding: 10px 14px 12px;
    position: relative;
    overflow: visible !important;
}

.hack-actions {
    display: grid;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.hack-select-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 10px;
    margin-bottom: 12px;
    align-items: stretch;
    position: relative;
    overflow: visible !important;
    z-index: 20;
}

.hack-buy-form {
    position: relative;
    overflow: visible !important;
    z-index: 20;
}

.hack-buy-btn,
.hack-detail-btn,
.hack-guide-btn,
.home-category-enter-ui {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    width: 100%;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
}
.hack-buy-btn {
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%);
    color: #041008;
    box-shadow: 0 12px 24px rgba(34,255,136,.18);
}

.hack-buy-btn:hover,
.hack-buy-btn:focus-visible,
.hack-buy-btn:active {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: rgba(255,255,255,.85) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.45),
        0 8px 20px rgba(255,255,255,.16) !important;
}

.hack-detail-btn,
.hack-guide-btn {
    background: linear-gradient(135deg, #0f1a14, #0b1510);
    border: 1px solid rgba(34,255,136,.25);
    color: #baffd8;
    text-align: center;
    padding: 0 12px;
}

.hack-detail-btn:hover,
.hack-detail-btn:focus-visible,
.hack-detail-btn:active,
.hack-guide-btn:hover,
.hack-guide-btn:focus-visible,
.hack-guide-btn:active,
.home-category-enter-ui:hover,
.home-category-enter-ui:focus-visible,
.home-category-enter-ui:active,
.tool-link-item:hover,
.tool-link-item:focus-visible,
.tool-link-item:active,
.pack-item:hover,
.pack-item:focus-visible,
.pack-item:active,
.pack-item.active {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: rgba(255,255,255,.85) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.45),
        0 8px 20px rgba(255,255,255,.16) !important;
    filter: none !important;
}

.tool-link-item:hover *,
.tool-link-item:focus-visible *,
.tool-link-item:active *,
.pack-item:hover *,
.pack-item:focus-visible *,
.pack-item:active *,
.pack-item.active * {
    color: #000000 !important;
}

/* ========= TRANG CHI TIẾT ========= */
.tool-detail-page {
    min-height: 100vh;
    padding: 20px 8px 28px;
    background: transparent;
}

.tool-detail-wrap {
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: visible !important;
    width: 100%;
}

.tool-detail-hero {
    margin-bottom: 18px;
    position: relative;
    z-index: 25;
    overflow: visible !important;
}

.tool-detail-main {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
    gap: 18px;
    align-items: start;
    overflow: visible !important;
}

.tool-video-card,
.tool-info-card,
.tool-action-card {
    border-radius: 24px;
}

.tool-video-card,
.tool-info-card,
.tool-action-card {
    padding: 18px;
}

.tool-action-card {
    position: relative;
    overflow: visible !important;
}

.tool-side-stack {
    display: grid;
    gap: 18px;
    position: relative;
    overflow: visible !important;
}

.tool-block-title,
.tool-block-title-center,
.tool-box-title,
.tool-buy-title-center,
.tool-buy-head h2,
.tool-buy-merged-head,
.tool-link-merged-title {
    margin: 0 0 16px;
    width: 100%;
    padding: 0 0 12px;
    text-align: center !important;
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #ffffff;
    background: none;
    box-shadow: none;
    border: 0;
    position: relative;
}

.tool-block-title::after,
.tool-block-title-center::after,
.tool-box-title::after,
.tool-buy-title-center::after,
.tool-buy-head h2::after,
.tool-buy-merged-head::after,
.tool-link-merged-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 12px;
    background: linear-gradient(90deg, transparent, rgba(34,255,136,.38), transparent);
}

.tool-video-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

.tool-video-box iframe,
.tool-video-box video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    border-radius: 18px !important;
    overflow: hidden !important;
}

.tool-video-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ab8a5;
    font-size: 16px;
    font-weight: 700;
}

.tool-info-content {
    padding: 0;
    border: 0;
    background: transparent;
    border-radius: 0;
    color: #ffffff;
    font-size: 14px;
    line-height: 1.9;
}

.tool-login-note {
    margin: 0 0 12px;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,.72);
    font-style: italic;
}

.tool-alert {
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    margin-bottom: 14px;
}

.tool-alert-error {
    background: rgba(255,82,82,.10);
    border: 1px solid rgba(255,82,82,.16);
    color: #ffc1c1;
}

.tool-buy-form,
.tool-buy-form-merged {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 12px;
    align-items: stretch;
    width: 100%;
    position: relative;
    overflow: visible !important;
    z-index: 20;
}

.tool-buy-field {
    margin: 0;
    position: relative;
    overflow: visible !important;
}

/* ===== FIX NÚT MUA NGAY TRANG CHI TIẾT ===== */
.tool-buy-btn,
button.tool-buy-btn,
.tool-buy-form button[type="submit"],
.tool-buy-form-merged button[type="submit"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 16px !important;
    border: 0 !important;
    border-radius: 16px !important;
    cursor: pointer !important;

    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%) !important;
    color: #041008 !important;
    font-family: "Poppins", "Inter", sans-serif !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    box-shadow:
        0 12px 24px rgba(34,255,136,.18),
        inset 0 1px 0 rgba(255,255,255,.14) !important;

    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

.tool-buy-btn:hover,
.tool-buy-btn:focus-visible,
button.tool-buy-btn:hover,
button.tool-buy-btn:focus-visible,
.tool-buy-form button[type="submit"]:hover,
.tool-buy-form button[type="submit"]:focus-visible,
.tool-buy-form-merged button[type="submit"]:hover,
.tool-buy-form-merged button[type="submit"]:focus-visible {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    border-color: rgba(255,255,255,.85) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.45),
        0 8px 20px rgba(255,255,255,.16) !important;
    transform: translateY(-1px) !important;
}

.tool-buy-btn:active,
button.tool-buy-btn:active,
.tool-buy-form button[type="submit"]:active,
.tool-buy-form-merged button[type="submit"]:active {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
    transform: scale(.985) !important;
    box-shadow:
        0 0 0 1px rgba(255,255,255,.45),
        0 8px 20px rgba(255,255,255,.16) !important;
}

.tool-link-merged-title {
    margin-top: 20px !important;
}

.tool-link-grid,
.tool-link-grid-merged {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: stretch;
    width: 100%;
    margin-top: 4px !important;
}

.tool-link-item {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    height: 54px;
    padding: 0 14px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

.tool-link-item-download {
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%);
    color: #041008;
    border: 0;
    box-shadow: 0 12px 24px rgba(34,255,136,.16);
}

.tool-link-item-notify {
    background: #0d1712;
    color: #ffffff;
    border: 1px solid rgba(34,255,136,.20);
}

.tool-link-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tool-link-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.tool-link-text {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

/* ========= CUSTOM DROPDOWN CHỌN GÓI ========= */
.pack-dropdown {
    position: relative;
    width: 100%;
    overflow: visible !important;
    z-index: 30;
}

.pack-selected {
    position: relative !important;
    width: 100%;
    min-height: 54px;
    height: 54px;
    padding: 0 36px 0 14px !important;
    border-radius: 16px;
    border: 1px solid rgba(34,255,136,.20);
    background: linear-gradient(180deg, #0d1712, #101913);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center !important;
    gap: 10px;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        0 0 0 1px rgba(34,255,136,.03);
}

.pack-selected:hover,
.pack-dropdown.is-open .pack-selected {
    border-color: rgba(34,255,136,.30);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 0 3px rgba(34,255,136,.07);
}

.pack-selected-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center !important;
    width: 100% !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Poppins", "Inter", sans-serif;
    font-size: 14px;
    font-weight: 800;
}

.pack-selected-caret {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 14px !important;
    text-align: center !important;
    font-size: 11px;
    line-height: 1;
    margin: 0 !important;
}

.pack-dropdown.is-open .pack-selected-caret {
    transform: translateY(-50%) rotate(180deg) !important;
}

.pack-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(34,255,136,.18);
    background: linear-gradient(180deg, rgba(8,16,12,.99), rgba(4,10,7,.99));
    box-shadow:
        0 18px 36px rgba(0,0,0,.42),
        0 0 0 1px rgba(34,255,136,.04);
    z-index: 999;
    overflow: hidden !important;
}

.pack-dropdown.is-open .pack-menu {
    display: flex;
}

.pack-item {
    width: 100%;
    min-height: 38px !important;
    padding: 0 12px;
    margin: 0;
    border: 0;
    border-radius: 8px !important;
    background: transparent;
    box-shadow: none;
    color: #ecfff4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "Inter", sans-serif;
    font-size: clamp(10px, 1vw, 14px);
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.home-category-enter-ui {
    border: none;
    color: #02110a;
    background: linear-gradient(135deg, #22ff88, #12c768);
    box-shadow:
        0 6px 14px rgba(34,255,136,.14),
        inset 0 1px 0 rgba(255,255,255,.14);
    min-height: 40px !important;
    height: 40px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    max-width: 55% !important;
    margin: 0 auto !important;
}

/* ========= ẨN STYLE CŨ ========= */
.site-breadcrumb-wrap,
.tool-breadcrumb,
.catalog-top-box,
.catalog-tabs.home-catalog-tabs,
.catalog-subtabs-inside-topbox {
    display: none !important;
}

.tool-info-card-mobile {
    display: none;
}

.tool-info-card-desktop {
    display: block;
}

.tm-mobile-hide {
    display: flex;
}

.tm-desktop-hide {
    display: none;
}

/* ========= Z-INDEX FIX ========= */
.hack-card,
.hack-body,
.hack-buy-form,
.hack-select-wrap,
.pack-dropdown {
    overflow: visible !important;
}

.hack-card:hover,
.hack-card:focus-within {
    z-index: 20 !important;
}

.pack-dropdown.is-open {
    z-index: 200 !important;
}

.pack-dropdown.is-open .pack-menu {
    z-index: 300 !important;
}

/* ========= RESPONSIVE ========= */
@media (max-width: 1100px) {
    .hack-grid,
    .home-category-sync-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .tool-detail-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    :root {
        --tm-header-height: 72px;
    }

    body {
        padding-top: var(--tm-header-height);
    }

    .catalog-page,
    .tool-detail-page {
        padding: 14px 8px 24px;
    }

    .catalog-wrap,
    .container,
    .tool-detail-wrap {
        width: 100%;
        max-width: 100%;
    }

    .tm-header-inner {
        min-height: 68px;
        gap: 8px;
    }

    .tm-brand {
        gap: 8px;
    }

    .tm-brand-logo {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border-radius: 10px;
    }

    .tm-brand-name {
        font-size: 16px;
        letter-spacing: -0.03em;
    }

    .tm-header-right {
        gap: 8px;
    }

    .tm-link-btn {
        min-height: 40px;
        padding: 0 10px;
        border-radius: 12px;
        font-size: 11px;
        gap: 6px;
    }

    .tm-menu-toggle {
        min-width: 40px;
        min-height: 40px;
        border-radius: 12px;
        padding: 0 10px;
    }

    .tm-dropdown {
        width: min(300px, calc(100vw - 12px));
    }

    .site-topnav-wrap {
        margin-bottom: 14px;
    }

    .site-topnav {
        gap: 10px;
    }

    .site-topnav-dropdown {
        width: calc(50% - 5px) !important;
    }

    .site-topnav-home,
    .site-topnav-trigger {
        min-height: 42px !important;
        height: 42px !important;
        padding: 0 42px 0 12px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
    }

    .site-topnav-label {
        font-size: 12px;
    }

    .site-topnav-menu {
        padding: 8px;
        border-radius: 16px;
    }

    .site-topnav-menu-item {
        min-height: 40px;
        padding: 10px 12px;
        font-size: 12px;
        border-radius: 12px;
    }

    .hack-grid,
    .home-category-sync-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }

    .hack-card,
    .home-category-card-ui,
    .hack-card-sync {
        border-radius: 18px;
    }

    .hack-body,
    .home-category-body-ui {
        padding: 12px;
    }

    .home-category-top-title,
    .hack-card-sync .hack-card-top-title {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .hack-thumb {
        aspect-ratio: 16 / 10;
    }

    .hack-select-wrap {
        grid-template-columns: minmax(0, 1fr) 120px;
        gap: 10px;
        margin-bottom: 10px;
    }

    .hack-buy-btn,
    .hack-detail-btn,
    .hack-guide-btn,
    .home-category-enter-ui {
        min-height: 44px;
        font-size: 13px;
        border-radius: 12px;
        padding: 0 12px;
        line-height: 1.2;
    }

    .tool-detail-main {
        display: flex;
        flex-direction: column;
        gap: 14px;
        width: 100%;
    }

    .tool-info-card-mobile {
        display: block;
        order: 1;
    }

    .tool-video-card {
        order: 2;
        width: 100%;
        max-width: 100%;
        border-radius: 18px;
        padding: 14px;
    }

    .tool-side-stack {
        order: 3;
        gap: 14px;
        width: 100% !important;
        max-width: 100% !important;
    }

    .tool-info-card-desktop {
        display: none;
    }

    .tool-info-card,
    .tool-action-card {
        width: 100%;
        max-width: 100%;
        border-radius: 18px !important;
        padding: 14px !important;
        margin: 0;
    }

    .tool-block-title,
    .tool-block-title-center,
    .tool-box-title,
    .tool-buy-title-center,
    .tool-buy-head h2,
    .tool-buy-merged-head,
    .tool-link-merged-title {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }

    .tool-info-content {
        font-size: 13px;
        line-height: 1.75;
    }

    .tool-buy-form,
    .tool-buy-form-merged {
        grid-template-columns: minmax(0, 1fr) 120px !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .pack-selected,
    .tool-buy-btn,
    button.tool-buy-btn,
    .tool-buy-form button[type="submit"],
    .tool-buy-form-merged button[type="submit"] {
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        padding: 0 12px !important;
    }

    .pack-selected-text {
        font-size: 13px;
    }

    .pack-menu {
        border-radius: 14px;
        padding: 8px;
    }

    .pack-item {
        min-height: 38px;
        font-size: clamp(9px, 2.8vw, 12px);
        padding: 0 10px;
    }

    .tool-link-grid,
    .tool-link-grid-merged {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .tool-link-item {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px;
        min-height: 48px;
        border-radius: 14px;
        font-size: 13px;
    }

    .tool-link-icon,
    .tool-link-icon svg {
        width: 16px;
        height: 16px;
    }

    .tool-link-text {
        font-size: 13px;
    }

    .tool-video-box {
        border-radius: 14px;
    }

    .tool-video-box iframe,
    .tool-video-box video {
        border-radius: 14px !important;
    }
}

@media (max-width: 420px) {
    .tm-brand-name {
        font-size: 15px;
    }

    .tool-buy-form,
    .tool-buy-form-merged,
    .hack-select-wrap {
        grid-template-columns: minmax(0, 1fr) 110px;
    }

    .pack-item {
        font-size: 10px;
    }

    .hack-buy-btn,
    .hack-detail-btn,
    .hack-guide-btn,
    .home-category-enter-ui {
        font-size: 12px;
    }
}
/* ===== FIX CHỮ ĐEN KHI BẤM Ô GAME / THIẾT BỊ ===== */
.site-topnav-dropdown[open] > .site-topnav-trigger {
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%) !important;
    color: #000000 !important;
    border-color: transparent !important;
    box-shadow:
        0 10px 24px rgba(34,255,136,.22),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-label,
.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-caret,
.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-caret i {
    color: #000000 !important;
}

/* hover / focus / active của chính ô trigger cũng giữ chữ đen */
.site-topnav-dropdown > .site-topnav-trigger:hover,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible,
.site-topnav-dropdown > .site-topnav-trigger:active {
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%) !important;
    color: #000000 !important;
    border-color: transparent !important;
    box-shadow:
        0 10px 24px rgba(34,255,136,.22),
        inset 0 1px 0 rgba(255,255,255,.14) !important;
}

.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-label,
.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-caret,
.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-caret i,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible .site-topnav-label,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible .site-topnav-caret,
.site-topnav-dropdown > .site-topnav-trigger:focus-visible .site-topnav-caret i,
.site-topnav-dropdown > .site-topnav-trigger:active .site-topnav-label,
.site-topnav-dropdown > .site-topnav-trigger:active .site-topnav-caret,
.site-topnav-dropdown > .site-topnav-trigger:active .site-topnav-caret i {
    color: #000000 !important;
}
/* ===== ẢNH BÌA CHỪA 2 BÊN ===== */

.hack-thumb-link {
    display: block !important;
    width: calc(100% - 16px) !important; /* chừa 8px mỗi bên */
    margin: 0 auto !important; /* canh giữa */
    border-radius: 12px !important; /* bo nhẹ cho đẹp */
    overflow: hidden !important;
}

/* ảnh bên trong */
.hack-thumb,
img.hack-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    border-radius: 12px !important;
}
.hack-actions {
    position: relative !important;
    display: grid !important;
    gap: 10px !important;
    padding-top: 14px !important;
}
/* ===== GẠCH XANH DƯỚI TÊN GAME ===== */

.home-category-top-title,
.hack-card-sync .hack-card-top-title {
    position: relative !important;
    padding-bottom: 14px !important; /* tạo khoảng cách xuống dưới */
    margin-bottom: 10px !important; /* cách ảnh */
}

/* gạch */
.home-category-top-title::after,
.hack-card-sync .hack-card-top-title::after {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    right: 16px !important;
    bottom: 0 !important;

    height: 2px !important;
    border-radius: 2px;

    background: linear-gradient(90deg, transparent, #22ff88, transparent) !important;
    box-shadow: 0 0 8px rgba(34,255,136,.6);
}
/* ===== FIX CARET (VÒNG TRÒN TAM GIÁC) ===== */

/* trạng thái bình thường giữ nguyên (nếu muốn có thể chỉnh lại) */
.site-topnav-caret {
    background: rgba(34,255,136,.10);
    border: 1px solid rgba(34,255,136,.18);
    color: #ffffff;
}

/* khi bấm mở menu */
.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-caret {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

/* icon tam giác bên trong */
.site-topnav-dropdown[open] > .site-topnav-trigger .site-topnav-caret i {
    color: #000000 !important;
}

/* hover cũng giữ trắng-đen luôn cho đồng bộ */
.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-caret {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

.site-topnav-dropdown > .site-topnav-trigger:hover .site-topnav-caret i {
    color: #000000 !important;
}
/* =========================================================
   PACK DROPDOWN SMART POSITION
   nếu thiếu chỗ dưới thì mở lên trên
========================================================= */

.pack-dropdown {
    position: relative;
    overflow: visible !important;
}

.pack-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    bottom: auto;
    width: 100%;
    max-height: min(320px, 70vh);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
}

/* khi cần mở lên trên */
.pack-dropdown.open-up .pack-menu {
    top: auto !important;
    bottom: calc(100% + 8px) !important;
}

/* thanh cuộn gọn hơn */
.pack-menu::-webkit-scrollbar {
    width: 6px;
}

.pack-menu::-webkit-scrollbar-track {
    background: transparent;
}

.pack-menu::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.18);
    border-radius: 999px;
}

/* mobile: menu cao vừa màn hình */
@media (max-width: 767px) {
    .pack-menu {
        max-height: min(360px, 58vh) !important;
    }
}
/* ===== ẨN TAM GIÁC MẶC ĐỊNH BÊN TRÁI CỦA SUMMARY ===== */
.site-topnav-dropdown > summary.site-topnav-trigger {
    list-style: none !important;
}

.site-topnav-dropdown > summary.site-topnav-trigger::-webkit-details-marker {
    display: none !important;
}

.site-topnav-dropdown > summary.site-topnav-trigger::marker {
    display: none !important;
    content: "" !important;
}

/* đảm bảo mobile không bị hiện lại */
@media (max-width: 767px) {
    .site-topnav-dropdown > summary.site-topnav-trigger {
        list-style: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .site-topnav-dropdown > summary.site-topnav-trigger::-webkit-details-marker {
        display: none !important;
    }

    .site-topnav-dropdown > summary.site-topnav-trigger::marker {
        display: none !important;
        content: "" !important;
    }
}
/* =========================================================
   CARET CHỌN GÓI = GIỐNG 100% CARET THANH CHỌN NHANH
========================================================= */

/* nút chọn gói */
.pack-selected {
    position: relative !important;
    padding-right: 42px !important;
}

/* vòng tròn chứa tam giác */
.pack-selected-caret {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(34,255,136,.10) !important;
    border: 1px solid rgba(34,255,136,.18) !important;
    color: currentColor !important;
    font-size: 11px !important;
    line-height: 1 !important;
    box-shadow: none !important;
    transition:
        background .18s ease,
        color .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease !important;
}

/* icon bên trong */
.pack-selected-caret i,
.pack-selected-caret svg {
    color: currentColor !important;
    fill: currentColor !important;
    font-size: 11px !important;
    line-height: 1 !important;
}

/* trạng thái thường: giữ y như topnav */
.pack-selected:hover .pack-selected-caret,
.pack-selected:focus-visible .pack-selected-caret {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
}

/* khi hover thì icon bên trong cũng đen */
.pack-selected:hover .pack-selected-caret i,
.pack-selected:hover .pack-selected-caret svg,
.pack-selected:focus-visible .pack-selected-caret i,
.pack-selected:focus-visible .pack-selected-caret svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* khi mở menu: caret quay lên + trắng đen giống thanh chọn nhanh */
.pack-dropdown.is-open .pack-selected-caret {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #000000 !important;
    transform: translateY(-50%) rotate(180deg) !important;
}

/* icon bên trong khi mở */
.pack-dropdown.is-open .pack-selected-caret i,
.pack-dropdown.is-open .pack-selected-caret svg {
    color: #000000 !important;
    fill: #000000 !important;
}

/* hiệu ứng bấm */
.pack-selected:active .pack-selected-caret {
    transform: translateY(-50%) scale(.96) !important;
}

.pack-dropdown.is-open .pack-selected:active .pack-selected-caret {
    transform: translateY(-50%) rotate(180deg) scale(.96) !important;
}

/* mobile vẫn giữ y chang */
@media (max-width: 767px) {
    .pack-selected {
        padding-right: 42px !important;
    }

    .pack-selected-caret {
        right: 10px !important;
        width: 22px !important;
        height: 22px !important;
        font-size: 11px !important;
    }

    .pack-selected-caret i,
    .pack-selected-caret svg {
        font-size: 11px !important;
    }
}
/* =========================================================
   PROFILE INFO - NEW REAL STYLE
========================================================= */

.tm-profile-page{
    position: relative;
    z-index: 1;
    padding: 20px 0 30px;
}

.tm-profile-shell{
    max-width: 1120px;
    margin: 0 auto;
    display: grid;
    gap: 18px;
}

.tm-profile-maincard,
.tm-profile-vipbar{
    position: relative;
    background: var(--tm-card);
    border: 1px solid var(--tm-green-border);
    border-radius: 26px;
    box-shadow: var(--tm-shadow);
    overflow: hidden;
}

.tm-profile-maincard::before,
.tm-profile-vipbar::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,255,136,.30), transparent);
    pointer-events: none;
}

.tm-profile-maincard{
    padding: 20px;
}

.tm-profile-head{
    margin-bottom: 18px;
    padding-bottom: 16px;
    position: relative;
}

.tm-profile-head::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(34,255,136,.35), transparent);
}

.tm-profile-kicker{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(34,255,136,.10);
    border: 1px solid rgba(34,255,136,.18);
    color: #d9ffeb;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.tm-profile-heading-row{
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.tm-profile-heading-row h1{
    margin: 0;
    font-family: "Poppins","Inter",sans-serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    line-height: 1.05;
    color: #ffffff;
}

.tm-profile-vip-badge{
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: linear-gradient(135deg, #22ff88 0%, #12c768 100%);
    color: #041008;
    font-family: "Poppins","Inter",sans-serif;
    font-size: 13px;
    font-weight: 900;
    box-shadow:
        0 12px 26px rgba(34,255,136,.18),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.tm-profile-stats{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.tm-profile-stat{
    min-height: 86px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid rgba(34,255,136,.10);
    display: grid;
    gap: 8px;
    align-content: center;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.tm-profile-stat:hover{
    transform: translateY(-1px);
    border-color: rgba(34,255,136,.20);
    box-shadow:
        0 12px 24px rgba(0,0,0,.24),
        0 0 0 1px rgba(34,255,136,.05);
}

.tm-profile-stat span{
    color: var(--tm-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;
}

.tm-profile-stat strong{
    color: #fff;
    font-family: "Poppins","Inter",sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    word-break: break-word;
}

.tm-profile-stat--green strong{
    color: #e8fff4;
}

.tm-profile-stat--bonus strong{
    color: #22ff88;
}

.tm-profile-vipbar{
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    gap: 18px;
    align-items: center;
}

.tm-profile-vipbar-side{
    min-width: 0;
}

.tm-profile-vipbar-side--left{
    text-align: left;
}

.tm-profile-vipbar-side--right{
    text-align: right;
}

.tm-profile-vipbar-label{
    color: #9ab0a1;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.tm-profile-vipbar-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    margin-bottom: 8px;
}

.tm-profile-vipbar-icon img{
    max-height: 60px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(34,255,136,.18));
}

.tm-profile-vipbar-bonus{
    color: #22ff88;
    font-family: "Poppins","Inter",sans-serif;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 4px;
}

.tm-profile-vipbar-threshold{
    color: #fff;
    font-family: "Poppins","Inter",sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}

.tm-profile-vipbar-center{
    text-align: center;
}

.tm-profile-vipbar-balance{
    margin-bottom: 12px;
    color: #fff;
    font-family: "Poppins","Inter",sans-serif;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 900;
    line-height: 1.1;
}

.tm-profile-vipbar-progress{
    width: 100%;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #07110c;
    border: 1px solid rgba(34,255,136,.18);
    box-shadow: inset 0 2px 6px rgba(0,0,0,.24);
    margin-bottom: 12px;
}

.tm-profile-vipbar-progress-fill{
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22ff88 0%, #12c768 100%);
    box-shadow:
        0 0 18px rgba(34,255,136,.24),
        inset 0 1px 0 rgba(255,255,255,.18);
}

.tm-profile-vipbar-note{
    color: #fff;
    font-family: "Poppins","Inter",sans-serif;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
}

@media (max-width: 980px){
    .tm-profile-vipbar{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .tm-profile-vipbar-side--left,
    .tm-profile-vipbar-side--right,
    .tm-profile-vipbar-center{
        text-align: center;
    }
}

@media (max-width: 767px){
    .tm-profile-page{
        padding: 14px 0 24px;
    }

    .tm-profile-shell{
        gap: 14px;
    }

    .tm-profile-maincard,
    .tm-profile-vipbar{
        border-radius: 20px;
    }

    .tm-profile-maincard{
        padding: 14px;
    }

    .tm-profile-head{
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .tm-profile-heading-row h1{
        font-size: 20px;
    }

    .tm-profile-stats{
        grid-template-columns: 1fr;
        gap: 10px;
    }

.tm-profile-stat{
    min-height: 72px;
    padding: 16px 18px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    border: 1px solid rgba(34,255,136,.10);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.tm-profile-stat span{
    color: var(--tm-text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;
    flex: 0 0 auto;
}

.tm-profile-stat strong{
    color: #fff;
    font-family: "Poppins","Inter",sans-serif;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.2;
    text-align: right;
    word-break: break-word;
    flex: 1 1 auto;
}
    .tm-profile-vipbar{
        padding: 14px;
        gap: 12px;
    }

    .tm-profile-vipbar-balance{
        font-size: 18px;
        margin-bottom: 10px;
    }

    .tm-profile-vipbar-icon img{
        max-height: 52px;
    }

    .tm-profile-vipbar-bonus{
        font-size: 13px;
    }

    .tm-profile-vipbar-threshold{
        font-size: 14px;
    }

    .tm-profile-vipbar-note{
        font-size: 14px;
        line-height: 1.45;
    }
}