/* =========================================================
   TIBETAN FINTECH DESIGN SYSTEM
   Theme: Tibetan Red × Tibetan Gold
   Scope: GLOBAL (ALL UI)
   ========================================================= */

/* =========================
   1. ROOT COLOR SYSTEM
   ========================= */
:root {
    /* Core colors */
    --tibet-red: #9e1b32;
    --tibet-red-dark: #7a1024;
    --tibet-gold: #c9a24d;
    --tibet-gold-light: #ead7a2;

    /* Backgrounds */
    --tibet-bg-main: #f8f3ec;
    --tibet-bg-card: #ffffff;
    --tibet-bg-soft: #fbf7f1;

    /* Text */
    --tibet-text-main: #2b2b2b;
    --tibet-text-muted: #6f6f6f;

    /* Shadows */
    --tibet-shadow-red: rgba(158, 27, 50, 0.25);
    --tibet-shadow-gold: rgba(201, 162, 77, 0.25);
}

/* =========================
   2. GLOBAL RESET / BODY
   ========================= */
body {
    background: var(--tibet-bg-main);
    color: var(--tibet-text-main);
}

/* Neutralize old beige / gray blocks */
.extra-bg,
.section-pt,
.product-detail,
.product-detail-tab,
.dashboard-section,
.page-wrapper {
    background: var(--tibet-bg-main);
}

/* =========================
   3. HEADER – TOP BAR – MARQUEE
   ========================= */
.header-bar,
.notification-marquee,
.top-marquee {
    background: linear-gradient(
        90deg,
        var(--tibet-red),
        var(--tibet-red-dark)
    );
    color: #ffffff;
}

.header-bar a,
.notification-marquee a,
.top-marquee a {
    color: var(--tibet-gold-light);
    font-weight: 600;
}

/* =========================
   4. BUTTON SYSTEM (GLOBAL)
   ========================= */
.btn-style,
.primary-btn,
.secondary-btn,
button.btn,
a.btn {
    background: linear-gradient(
        135deg,
        var(--tibet-red),
        var(--tibet-gold)
    );
    color: #ffffff !important;
    font-weight: 700;
    border: none;
    letter-spacing: 0.5px;
    box-shadow: 0 12px 30px var(--tibet-shadow-red);
    transition: all 0.3s ease;
}

.btn-style:hover,
.primary-btn:hover,
.secondary-btn:hover,
button.btn:hover,
a.btn:hover {
    background: linear-gradient(
        135deg,
        var(--tibet-red-dark),
        var(--tibet-gold)
    );
    transform: translateY(-2px);
    box-shadow: 0 18px 40px var(--tibet-shadow-red);
}

/* =========================
   5. CARD / BOX / PANEL
   ========================= */
.card,
.box,
.service-content,
.product-detail-info,
.dashboard-card,
.affiliate-card,
.stat-box {
    background: var(--tibet-bg-card);
    border-radius: 16px;
    box-shadow:
        0 20px 45px var(--tibet-shadow-red),
        0 0 0 1px rgba(201, 162, 77, 0.15);
}

/* Hover elevation */
.card:hover,
.dashboard-card:hover,
.service-content:hover {
    transform: translateY(-4px);
    box-shadow:
        0 30px 60px var(--tibet-shadow-red),
        0 0 0 1px rgba(201, 162, 77, 0.25);
}

/* =========================
   6. PRICE / ASSET / VALUE
   ========================= */
.price-box,
.asset-box,
.balance-box,
.equity-box {
    background: linear-gradient(
        135deg,
        var(--tibet-gold-light),
        #ffffff
    );
    border: 1px solid var(--tibet-gold);
    color: var(--tibet-red-dark);
    font-weight: 700;
    border-radius: 14px;
}

/* =========================
   7. STATUS / BADGE
   ========================= */
.text-success,
.status-active,
.badge-success {
    color: var(--tibet-gold) !important;
    font-weight: 700;
}

.text-danger,
.status-inactive {
    color: var(--tibet-red) !important;
}

.badge,
.tag,
.label {
    background: var(--tibet-red);
    color: #ffffff;
}

/* =========================
   8. ICON SYSTEM
   ========================= */
.dominant-color,
.service-icon,
.icon-primary {
    color: var(--tibet-red);
}

.icon-gold {
    color: var(--tibet-gold);
}

/* =========================
   9. IMAGE / MEDIA SHADOW
   ========================= */
.product-item-img img,
.hero-image img,
.card img {
    box-shadow:
        0 25px 60px var(--tibet-shadow-red),
        0 0 0 1px rgba(201, 162, 77, 0.15);
    transition: transform 0.5s ease;
}

.product-item-img img:hover,
.hero-image img:hover {
    transform: translateY(-6px) scale(1.02);
}

/* =========================
   10. TABS / NAVIGATION
   ========================= */
.nav-tabs a.active {
    color: var(--tibet-red);
    border-bottom: 2px solid var(--tibet-red);
}

.nav-tabs a:hover {
    color: var(--tibet-gold);
}

/* =========================
   11. TABLE
   ========================= */
table tr {
    transition: background 0.3s ease;
}

table tr:hover {
    background: rgba(201, 162, 77, 0.08);
}

/* =========================
   12. MOBILE MENU / BOTTOM BAR
   ========================= */
.mobile-menu,
.bottom-nav {
    background: linear-gradient(
        180deg,
        #ffffff,
        var(--tibet-bg-soft)
    );
}

.bottom-nav a.active {
    color: var(--tibet-red);
}

/* =========================
   13. MLM / AFFILIATE TREE
   ========================= */
.mlm-node,
.affiliate-node {
    border: 2px solid var(--tibet-gold);
    background: #ffffff;
    box-shadow: 0 12px 30px var(--tibet-shadow-red);
}

.mlm-node.active {
    background: linear-gradient(
        135deg,
        var(--tibet-red),
        var(--tibet-gold)
    );
    color: #ffffff;
}

/* =========================
   14. SHADOW OVERRIDE (GLOBAL)
   ========================= */
.box-shadow {
    box-shadow:
        0 25px 60px var(--tibet-shadow-red),
        0 0 0 1px rgba(201, 162, 77, 0.15) !important;
}

/* =========================
   15. CTA GOLD SHIMMER (OPTIONAL)
   ========================= */
.btn-gold-shimmer {
    position: relative;
    overflow: hidden;
}

.btn-gold-shimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 120%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.45),
        transparent
    );
    animation: tibetShimmer 2.8s infinite;
}

@keyframes tibetShimmer {
    0% { left: -120%; }
    100% { left: 120%; }
}

/* ============================= */
/* 🟥🟨 TIBETAN MOBILE MENU FX */
/* ============================= */
/* Mobile menu background: WARM GOLD */
.mobile-menu {
    background: linear-gradient(
        180deg,
        #f8f1e6 0%,   /* vàng nhạt */
        #f3e6cf 100%
    ) !important;

    box-shadow:
        0 0 0 1px rgba(201,162,77,0.25),
        0 30px 70px rgba(0,0,0,0.25);
}

/* Main menu text */
.menu-li a,
.menu-close-btn,
.menu-btn button {
    color: #6b1d1d !important; /* đỏ nâu Tây Tạng */
    font-weight: 500;
}

/* Divider lines */
.menu-li.bst,
.menudrop-li.bst {
    border-color: rgba(120, 0, 0, 0.12) !important;
}

/* Hover state */
.menu-li:hover {
    background: rgba(201,162,77,0.18);
}
.menu-li:hover a {
    color: #8b0000 !important;
}

/* Active / expanded section */
.menu-btn[aria-expanded="true"],
.menu-btn button[aria-expanded="true"] {
    color: #8b0000 !important;
}

/* Submenu background */
.menu-dropdown {
    background: rgba(255, 248, 235, 0.9) !important;
    box-shadow: inset 0 0 0 1px rgba(201,162,77,0.2);
}

/* Submenu item */
.menudrop-li a {
    color: #5a1a1a !important;
}
.menudrop-li:hover {
    background: rgba(201,162,77,0.25);
}

/* Plus / minus icon */
.menu-btn i {
    color: #8b0000 !important;
    opacity: 0.85;
}
.menu-btn:hover i {
    color: #b8860b !important; /* vàng kim */
}

/* Close button hover */
.menu-close-btn:hover {
    color: #b8860b !important;
    transform: rotate(90deg) scale(1.1);
}

/* ============================= */
/* 🟨 BOTTOM MENU READABILITY FIX */
/* ============================= */
.bottom-menu {
    background: linear-gradient(
        180deg,
        #f8f1e6,
        #f3e6cf
    ) !important;

    box-shadow:
        0 -8px 20px rgba(0,0,0,0.25),
        0 0 0 1px rgba(201,162,77,0.25);
}

.bottom-menu-icon,
.bottom-menu-title {
    color: #6b1d1d !important;
}

.bottom-menu a:hover .bottom-menu-icon,
.bottom-menu a:hover .bottom-menu-title {
    color: #b8860b !important;
}

/* =============================== */
/* 🧭 PRODUCT INFO DESKTOP FIX     */
/* =============================== */
@media (min-width: 992px) {

    /* Price box chỉ ôm nội dung */
    .product-detail-info .price-box {
        display: inline-block;
        width: auto;
        padding: 8px 18px;
        margin-bottom: 6px;
    }

}


/* ===================================================== */
/* 🧭 DESKTOP MENU & DROPDOWN – FINAL CONSOLIDATED FIX  */
/* ===================================================== */
@media (min-width: 1200px) {

    .header-menu .menu-ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 32px;                 /* khoảng cách giữa các item */
    }

    .header-menu .menu-li {
        position: relative;
        white-space: nowrap;       /* ❗ CHỐNG VỠ CHỮ */
    }

    .header-menu .menu-link {
        display: flex;
        align-items: center;
        padding: 0 8px !important; /* tránh chữ dính nhau */
        line-height: 1.2;
    }

    .header-menu .menu-title {
        letter-spacing: 0.4px;
    }

    .header-menu .menu-dropdown {
        position: absolute !important;
        top: 100%;
        left: 0;                   /* ❗ KHÔNG CENTER */
        margin-top: 12px;
        margin-left: 14px;         /* 👈 CHỈ THỤT TRÁI */

        min-width: 260px;

        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);

        transition: all 0.25s ease;
        z-index: 9999;

        display: block !important; /* override collapse */
        height: auto !important;
        overflow: visible !important;

        background: linear-gradient(
            180deg,
            #fffaf0,
            #f3e6cf
        );
        border-radius: 14px;
        padding: 14px 0;

        box-shadow:
            0 25px 60px rgba(158,27,50,0.25),
            0 0 0 1px rgba(201,162,77,0.25);
    }

    /* Hover trigger */
    .header-menu .menu-li:hover > .menu-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Tắt logic collapse trên desktop */
    .header-menu .menu-dropdown.collapse {
        display: block !important;
    }

    /* =========================
       SUBMENU ITEM
       ========================= */

    .header-menu .menudrop-li a {
        display: block;
        padding: 10px 22px;
        color: #6b1d1d !important;
        font-weight: 500;
        white-space: nowrap;
        transition: all 0.2s ease;
    }

    .header-menu .menudrop-li a:hover {
        background: rgba(201,162,77,0.25);
        color: #8b0000 !important;
        padding-left: 28px;
    }
}

/* ===================================================== */
/* 🟥🟨 TIBETAN FOOTER – PREMIUM FINTECH STYLE           */
/* ===================================================== */
/* ===== FOOTER BACKGROUND ===== */
#footer {
    background: linear-gradient(
        180deg,
        #f9f4ec 0%,
        #f3e6cf 100%
    );
    position: relative;
    overflow: hidden;
}

/* subtle sacred glow */
#footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(201,162,77,0.18),
            transparent 60%
        );
    pointer-events: none;
}

/* ===== FOOTER CONTENT SPACING ===== */
.footer-area {
    position: relative;
    z-index: 2;
}

/* ===== LOCATION ICON – SACRED BADGE ===== */
.footer-contact .icon-16 {
    background: linear-gradient(
        135deg,
        var(--tibet-red),
        var(--tibet-gold)
    );
    color: #fff !important;
    box-shadow:
        0 12px 30px rgba(158,27,50,0.35),
        inset 0 0 0 1px rgba(255,255,255,0.25);
    transition: all 0.4s ease;
}

/* icon hover elevation */
.footer-contact:hover .icon-16 {
    transform: translateY(-6px) rotate(6deg);
    box-shadow:
        0 20px 45px rgba(158,27,50,0.45),
        inset 0 0 0 1px rgba(255,255,255,0.35);
}

/* ===== ADDRESS TEXT ===== */
.footer-contact .ul-ft span {
    display: block;
    font-size: 15px;
    letter-spacing: 0.4px;
    color: var(--tibet-text-main);
}

/* ===== FOOTER BOTTOM BAR ===== */
.copyright {
    background: linear-gradient(
        90deg,
        var(--tibet-red-dark),
        var(--tibet-red)
    );
    color: var(--tibet-gold-light);
    font-weight: 600;
    letter-spacing: 0.6px;
    position: relative;
    z-index: 2;
}

/* subtle top border */
.copyright::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(201,162,77,0.6),
        transparent
    );
}

/* ===== FOOTER TEXT HOVER GLOW ===== */
.copyright:hover {
    text-shadow: 0 0 12px rgba(201,162,77,0.65);
}

/* ===== RESPONSIVE REFINEMENT ===== */
@media (max-width: 768px) {
    .footer-contact .ul-ft span {
        font-size: 14px;
    }
}