body::-webkit-scrollbar{width:15px;/* Chiều rộng vùng chứa scrollbar */}
body::-webkit-scrollbar-track{background:#ccc;/* Màu nền ngoài của thanh scrollbar */}
body::-webkit-scrollbar-thumb{background-color:black;/* Màu của thanh cuộn (scroll thumb) */ border-radius:2px;/* Bo góc scroll thumb */}
body::-webkit-scrollbar-thumb:hover{background-color:black;/* Hiệu ứng di chuột đổi màu*/}
body{/*cho Firefox*/ scrollbar-width:thin;/* "auto" hoặc "thin" */ scrollbar-color:black #ccc;/* scroll thumb and track */}
ol{counter-reset:li;list-style:none;padding:0;text-shadow:0 1px 0 rgba(255, 255, 255, .5)}
ol a{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#D3D4DA;color:#444;text-decoration:none;transition:all .3s ease-out}
ol a:hover{background:#DCDDE1}
ol a:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#f9dd94;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold}
ol a:after{position:absolute;content:"";border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out}
ol a:hover:after{left:-.5em;border-left-color:#f9dd94}
.thumbnail_zoom{margin:0 auto}
.thumbnail_zoom:hover{transform:scale(10);/* (150% zoom - Note:if the zoom is too large, it will go outside of the viewport) */ position:absolute;z-index:999}
.img_thumbnail_zoom{height:100px;border-width:0.5px}
/* CSS */ .nav-link{align-items:center;background:#252525;border:0 solid #E2E8F0;box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);box-sizing:border-box;color:white;display:block;font-size:1rem;font-weight:700;height:60px;margin:5px;justify-content:center;line-height:24px;overflow-wrap:break-word;padding:22px 25px;text-decoration:none;width:auto;border-radius:8px;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.nav-pills .nav-item a{color:white}
.badge2{padding:0.8em 0.8em;line-height:1.3;text-transform:capitalize;border-radius:5px}
.name-product{font-size:15px}
.iq-sidebar-menu .side-menu li a{color:#e2e2e2}
.title-comm{color:#fff;font-size:18px;position:relative;margin-top:30px;margin-bottom:30px;font-weight:700;background-color:#fff;text-align:center}
h3.title-comm:before{content:'';position:absolute;top:50%;left:0;right:0;margin-top:0;border-top:2px solid #d0d2d3;z-index:1;display:block}
.title-comm .title-holder{min-width:350px;height:45px;background-color:#56bbe7;height:auto;line-height:45px;padding:0px 20px;position:relative;z-index:2;text-align:center;display:inline-block;min-width:280px}
.title-holder:before{content:"";position:absolute;right:-15px;border-width:0px;bottom:0px;border-style:solid;border-color:#5c9efe transparent;display:block;width:0;height:0;border-top:23px solid transparent;border-bottom:22px solid transparent;border-left:15px solid #56bbe7}
.title-holder:after{content:"";position:absolute;left:-15px;border-width:0px;bottom:0px;border-style:solid;border-color:#5c9efe transparent;display:block;width:0;height:0;border-top:23px solid transparent;border-bottom:22px solid transparent;border-right:15px solid #56bbe7}
.table tr th{border:2px white solid}
.dark .table tr th{border:2px #181818 solid}
.thumbnail-mobile{width:32px;height:24px;overflow:hidden;border:1px solid #e5e5e5}
.thumbnail-mobile img{width:100%;height:100%;transition-duration:0.1s}
.thumbnail-mobile img:hover{position:absolute;width:350px;height:210px;right:-20px;border:3px solid #00ac15;border-radius:9px;z-index:1000}
.modal-header{background-color:#f5f5f503}
/* call */ .mobilephone-outer{width:60px;height:60px;position:fixed;bottom:16px;/* left:0px;*/ z-index:10}
.mobilephone-outer a{display:block;min-height:60px;z-index:20}
.mobilephone-outer .wrap-mobilephone{width:40px;height:40px;border-radius:50%;background-color:#2980b9;text-align:center;line-height:40px;font-size:24px;color:#fff;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
.mobilephone-outer .wrap-mobilephone i{-webkit-animation:phone-ring 1.5s infinite;animation:phone-ring 1.5s infinite}
.mobilephone-outer .border-small-mobilephone{position:absolute;top:9px;left:9px;width:40px;height:40px;border-radius:50%;z-index:10;-webkit-animation:scale-phone 1.5s infinite;animation:scale-phone 1.5s infinite}
.mobilephone-outer .border-big-mobilephone{position:absolute;top:-5px;left:-5px;width:60px;height:60px;border-radius:50%;z-index:3;-webkit-animation:scale-phone 1.5s infinite;animation:scale-phone 1.5s infinite}
@-webkit-keyframes scale-phone{from{transform:scale(1, 1);border:5px rgba(41, 128, 185, 0.67) solid}
to{transform:scale(2, 2);border:5px rgba(41, 128, 185, 0) solid}
}
@keyframes scale-phone{from{transform:scale(1, 1);border:5px rgba(41, 128, 185, 0.67) solid}
to{transform:scale(2, 2);border:5px rgba(41, 128, 185, 0) solid}
}
@-webkit-keyframes phone-ring{0%{transform:rotate(0deg) scale(1) skew(1deg)}
10%{transform:rotate(-25deg) scale(1) skew(1deg)}
20%{transform:rotate(25deg) scale(1) skew(1deg)}
30%{transform:rotate(-25deg) scale(1) skew(1deg)}
40%{transform:rotate(25deg) scale(1) skew(1deg)}
50%{transform:rotate(0deg) scale(1) skew(1deg)}
100%{transform:rotate(0deg) scale(1) skew(1deg)}
}
@keyframes phone-ring{0%{transform:rotate(0deg) scale(1) skew(1deg)}
10%{transform:rotate(-25deg) scale(1) skew(1deg)}
20%{transform:rotate(25deg) scale(1) skew(1deg)}
30%{transform:rotate(-25deg) scale(1) skew(1deg)}
40%{transform:rotate(25deg) scale(1) skew(1deg)}
50%{transform:rotate(0deg) scale(1) skew(1deg)}
100%{transform:rotate(0deg) scale(1) skew(1deg)}
}
/* end call */ /* ===================================================== BUFFLIKE.PRO — Gen Z Premium Theme 2026 Neon Glass · Gradient Borders · Glow Effects ===================================================== */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');:root{/* Neon palette */ --neon-purple:#a855f7;--neon-blue:#6366f1;--neon-cyan:#22d3ee;--neon-pink:#ec4899;--neon-green:#34d399;--neon-orange:#fb923c;/* Gradients */ --grd-main:linear-gradient(135deg, #a855f7 0%, #6366f1 50%, #22d3ee 100%);--grd-warm:linear-gradient(135deg, #f59e0b, #ef4444, #ec4899);--grd-cool:linear-gradient(135deg, #6366f1, #22d3ee);--grd-sidebar:linear-gradient(180deg, #0a0a1a 0%, #111133 40%, #0d0d2b 100%);--grd-topbar:linear-gradient(135deg, rgba(10,10,30,0.88) 0%, rgba(17,17,51,0.88) 100%);--grd-glass:linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);--grd-card-border:linear-gradient(135deg, rgba(168,85,247,0.3), rgba(34,211,238,0.3));--grd-card-border-hover:linear-gradient(135deg, rgba(168,85,247,0.6), rgba(34,211,238,0.6));/* Surfaces */ --bg-body:#f4f6fb;--bg-card:#ffffff;--bg-input:#f8f9fc;--bg-sidebar:#0a0a1a;/* Text */ --text-main:#111827;--text-sub:#6b7280;--text-muted:#9ca3af;--text-light:#e0e7ff;/* Effects */ --glow-purple:0 0 30px rgba(168, 85, 247, 0.25);--glow-cyan:0 0 30px rgba(34, 211, 238, 0.2);--glow-card:0 8px 32px rgba(0, 0, 0, 0.06);--glass-bg:rgba(0, 0, 0, 0.02);--glass-border:rgba(0, 0, 0, 0.08);--glass-blur:blur(20px) saturate(180%);/* Radius */ --r-sm:10px;--r-md:16px;--r-lg:24px;--r-xl:32px;--r-full:9999px;/* Motion */ --ease-out:cubic-bezier(0.16, 1, 0.3, 1);--ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);--t-fast:0.2s;--t-med:0.35s;--font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif}
/* Dark mode */ .dark{--bg-body:#050510;--bg-card:rgba(17, 17, 40, 0.7);--bg-input:rgba(30, 30, 60, 0.6);--text-main:#e0e7ff;--text-sub:#94a3b8;--text-muted:#64748b;--glass-bg:rgba(255, 255, 255, 0.04);--glass-border:rgba(255, 255, 255, 0.08);--glow-card:0 8px 32px rgba(0, 0, 0, 0.3)}
/* ─── GLOBAL ─── */ body{font-family:var(--font) !important;background:var(--bg-body) !important;color:var(--text-main) !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* ─── SCROLLBAR ─── */ body::-webkit-scrollbar{width:6px !important}
body::-webkit-scrollbar-track{background:transparent !important}
body::-webkit-scrollbar-thumb{background:var(--grd-main) !important;border-radius:100px !important}
body{scrollbar-width:thin !important;scrollbar-color:#a855f7 transparent !important}
::selection{background:rgba(168, 85, 247, 0.3)}
/* ─── DISABLE DECO ─── */ .mai{display:none !important}
marquee{display:none !important}
/* ─── LOADING ─── */ #loading_ok{background:rgba(5, 5, 16, 0.88) !important}
#loading-text{font-family:var(--font) !important;font-size:14px !important;font-weight:600 !important;color:#e0e7ff !important;letter-spacing:0.08em;text-transform:uppercase;animation:glow-pulse 2s ease-in-out infinite !important}
@keyframes glow-pulse{0%, 100%{opacity:0.5;text-shadow:0 0 12px rgba(168,85,247,0)}
50%{opacity:1;text-shadow:0 0 20px rgba(168,85,247,0.5)}
}
#close-button{background:rgba(255,255,255,0.06) !important;color:rgba(255,255,255,0.5) !important;border:1px solid rgba(255,255,255,0.1) !important;border-radius:var(--r-full) !important;font-family:var(--font) !important;font-weight:600 !important;font-size:12px !important;padding:8px 20px !important;background:rgba(5, 5, 16, 0.7) !important;transition:var(--t-fast) var(--ease-out) !important}
#close-button:hover{background:rgba(239,68,68,0.15) !important;color:#f87171 !important;border-color:rgba(239,68,68,0.3) !important}
/* ═══════════════════════════════════════════ SIDEBAR — Ultra Modern 2026 ═══════════════════════════════════════════ */ .iq-sidebar.sidebar-default{zoom:1 !important;background:linear-gradient(180deg, rgba(8,8,20,0.98) 0%, rgba(12,10,28,0.99) 100%) !important;border-right:1px solid rgba(255,255,255,0.04) !important;box-shadow:4px 0 30px rgba(0,0,0,0.4) !important}
body.light .iq-sidebar.sidebar-default{background:linear-gradient(180deg, #fefefe 0%, #f8f9fc 100%) !important;border-right-color:rgba(0,0,0,0.06) !important;box-shadow:2px 0 20px rgba(0,0,0,0.05) !important}
.iq-sidebar-logo{padding:20px 16px !important;border-bottom:1px solid rgba(255,255,255,0.04) !important;min-height:72px !important;display:flex !important;align-items:center !important;justify-content:center !important}
body.light .iq-sidebar-logo{border-bottom-color:rgba(0,0,0,0.06) !important}
.iq-sidebar-menu{padding:12px 0 !important}
.iq-sidebar-menu .side-menu{padding:0 12px !important}
.iq-sidebar-menu .side-menu > li{margin-bottom:2px !important}
.iq-sidebar-menu .side-menu li a{color:rgba(148,163,184,0.85) !important;padding:9px 12px !important;border-radius:10px !important;transition:all 0.2s cubic-bezier(0.4,0,0.2,1) !important;font-size:13px !important;font-weight:500 !important;font-family:var(--font) !important;letter-spacing:0.01em;position:relative;overflow:hidden;border-left:3px solid transparent !important;display:flex !important;align-items:center !important;gap:10px !important}
body.light .iq-sidebar-menu .side-menu li a{color:#64748b !important}
.iq-sidebar-menu .side-menu li a::before{display:none !important}
.iq-sidebar-menu .side-menu li a:hover{color:#f1f5f9 !important;background:rgba(168,85,247,0.06) !important;border-left-color:rgba(168,85,247,0.5) !important}
body.light .iq-sidebar-menu .side-menu li a:hover{color:#1e293b !important;background:rgba(168,85,247,0.04) !important;border-left-color:rgba(168,85,247,0.4) !important}
.iq-sidebar-menu .side-menu li a i{font-size:14px !important;width:30px !important;height:30px !important;min-width:30px !important;line-height:30px !important;text-align:center;border-radius:8px;background:rgba(148,163,184,0.06);color:rgba(148,163,184,0.6) !important;transition:all 0.2s ease;display:inline-flex !important;align-items:center !important;justify-content:center !important}
body.light .iq-sidebar-menu .side-menu li a i{background:rgba(100,116,139,0.06);color:rgba(100,116,139,0.5) !important}
.iq-sidebar-menu .side-menu li a:hover i{color:var(--neon-purple) !important;background:rgba(168,85,247,0.12) !important}
.iq-sidebar-menu .side-menu li a span{font-size:13px !important}
/* Active item */ .sidebar-default .iq-sidebar-menu .side-menu > li.active > a, .iq-sidebar-menu .side-menu li.active-menu > a{background:rgba(168,85,247,0.08) !important;color:#fff !important;border-left:3px solid var(--neon-purple) !important;font-weight:600 !important;box-shadow:none !important}
body.light .sidebar-default .iq-sidebar-menu .side-menu > li.active > a{background:rgba(168,85,247,0.06) !important;color:#1e293b !important}
.sidebar-default .iq-sidebar-menu .side-menu > li.active > a i{color:var(--neon-purple) !important;background:rgba(168,85,247,0.15) !important}
/* Section headings */ .iq-sidebar-menu .side-menu li.px-3{padding:20px 14px 8px 14px !important;border-top:1px solid rgba(255,255,255,0.03);margin-top:4px}
body.light .iq-sidebar-menu .side-menu li.px-3{border-top-color:rgba(0,0,0,0.04)}
.iq-sidebar-menu .side-menu li.px-3 span{font-size:10px !important;font-weight:700 !important;letter-spacing:0.12em !important;text-transform:uppercase !important;color:rgba(148,163,184,0.3) !important;font-family:var(--font) !important}
body.light .iq-sidebar-menu .side-menu li.px-3 span{color:rgba(100,116,139,0.45) !important}
/* Sidebar badges */ .iq-sidebar-menu .side-menu li a .badge{font-size:9px !important;padding:3px 8px !important;border-radius:var(--r-full) !important;font-weight:700 !important;letter-spacing:0.04em;border:none !important}
.iq-sidebar-menu .side-menu li a .badge.badge-info{background:rgba(34,211,238,0.1) !important;color:var(--neon-cyan) !important}
.iq-sidebar-menu .side-menu li a .badge.badge-success{background:rgba(52,211,153,0.1) !important;color:var(--neon-green) !important}
/* ═══════════════════════════════════════════ SERVICE LIST - DARK MODE THEME OVERRIDES ═══════════════════════════════════════════ */ #serviceSearch, #order-service-search{background:rgba(255,255,255,0.05) !important;border:1px solid rgba(168,85,247,0.25) !important;color:#fff !important}
.light #serviceSearch, .light #order-service-search{background:#fff !important;border-color:#e2e8f0 !important;color:#1e293b !important}
.service-item{background:rgba(15,15,30,0.8) !important;border-color:rgba(255,255,255,0.06) !important;color:#e2e8f0 !important}
.light .service-item{background:#fff !important;border-color:#f1f1f1 !important;box-shadow:0 0 20px 2px rgba(221,221,221,0.3) !important;color:#1e293b !important}
.services-head-row .service-item{background:rgba(168,85,247,0.08) !important;border:none !important}
.light .services-head-row .service-item{background:#f8fafc !important}
.sp-serv-title{color:#f1f5f9 !important}
.light .sp-serv-title{color:#111 !important}
.sp-serv-sm{color:#94a3b8 !important}
.light .sp-serv-sm{color:#949494 !important}
.orlc{color:#94a3b8 !important}
.orlc.min{background:rgba(1,57,255,0.18) !important;border:1px solid #0139ff !important;color:#7aa2ff !important}
.orlc.max{background:#192146 !important;border:1px solid #242e5e !important;color:#fff !important}
.light .orlc.max{background:#fff !important;border:1px solid #f1f1f1 !important;color:#111 !important}
.si-header{background:url('/static/new_order/5pjlc1g48q57who9.png') rgba(15,22,58,0.9) !important;background-size:cover !important;background-position:right center !important}
.si-title{color:#fff !important}
.s-row.s-title .s-col{color:#94a3b8 !important}
.light .s-row.s-title .s-col{color:#6b7280 !important}
@media (min-width:768px){.si-wrapper{width:100% !important}
}
/* ═══════════════════════════════════════════ TOP NAVBAR — Clean Minimal Bar ═══════════════════════════════════════════ */ .iq-top-navbar{background:transparent !important;padding:8px 20px 0 20px !important;height:auto !important;z-index:999 !important;box-shadow:none !important}
.iq-navbar-custom{background:rgba(10,10,24,0.85) !important;backdrop-filter:blur(20px) saturate(1.4) !important;-webkit-backdrop-filter:blur(20px) saturate(1.4) !important;border-radius:14px !important;border:1px solid rgba(255,255,255,0.06) !important;box-shadow:0 4px 24px rgba(0,0,0,0.25) !important;padding:6px 16px !important}
body.light .iq-navbar-custom{background:rgba(255,255,255,0.9) !important;border-color:rgba(0,0,0,0.06) !important;box-shadow:0 2px 16px rgba(0,0,0,0.06) !important}
/* Dark/Light toggle */ .change-mode{padding:0 8px !important;display:flex !important;align-items:center !important}
.custom-switch-icon .custom-control-label{background:rgba(15,15,30,0.8) !important;border:1px solid rgba(255,255,255,0.1) !important;width:52px !important;height:28px !important;border-radius:100px !important;cursor:pointer !important;position:relative !important;margin:0 !important;overflow:hidden !important}
body.light .custom-switch-icon .custom-control-label{background:rgba(241,245,249,0.9) !important;border-color:rgba(0,0,0,0.08) !important}
.custom-switch-icon .custom-control-label::before{content:'' !important;position:absolute !important;top:3px !important;left:3px !important;width:22px !important;height:22px !important;background:var(--grd-main) !important;border-radius:50% !important;box-shadow:0 0 8px rgba(168,85,247,0.4) !important;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;z-index:2 !important;border:none !important}
.custom-control-input:checked ~ .custom-control-label::before{transform:translateX(24px) !important;background:var(--neon-cyan) !important;box-shadow:0 0 10px rgba(34,211,238,0.5) !important}
.switch-icon-left, .switch-icon-right{position:absolute !important;top:50% !important;transform:translateY(-50%) !important;z-index:3 !important;display:flex !important;align-items:center !important;justify-content:center !important;pointer-events:none !important}
.switch-icon-left svg, .switch-icon-right svg{width:13px !important;height:13px !important;stroke-width:2.5 !important}
.switch-icon-left{left:7px !important;opacity:0 !important}
.switch-icon-right{right:7px !important;opacity:1 !important}
.custom-control-input:checked ~ .custom-control-label .switch-icon-left{opacity:1 !important;color:#fff !important}
.custom-control-input:checked ~ .custom-control-label .switch-icon-right{opacity:0 !important}
.custom-switch-inner p{display:none !important}
.custom-control-label::after{display:none !important}
/* Old badge2 — hidden since we use np-chip now */ .badge2{display:none !important}
.user-name{font-weight:600 !important;font-size:13px !important;color:var(--text-light) !important;font-family:var(--font) !important}
body.light .user-name{color:#1e293b !important}
.navbar-list .nav-item .avatar-rounded{border:2px solid rgba(168,85,247,0.2) !important;border-radius:var(--r-full) !important;box-shadow:0 0 10px rgba(168,85,247,0.1);transition:all 0.2s ease}
.navbar-list .nav-item .avatar-rounded:hover{border-color:var(--neon-purple) !important;box-shadow:0 0 20px rgba(168,85,247,0.3)}
.side-menu-bt-sidebar .wrapper-menu{color:rgba(224,231,255,0.5) !important}
body.light .side-menu-bt-sidebar .wrapper-menu{color:#64748b !important}
/* ═══════════════════════════════════════════ NAVBAR CHIPS — Glassmorphism pills ═══════════════════════════════════════════ */ .np-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:50px;font-size:12px;font-weight:600;font-family:var(--font);text-decoration:none !important;transition:all 0.2s ease;white-space:nowrap;line-height:1.3;letter-spacing:0.01em}
.np-chip i{font-size:11px}
.np-chip:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,0.12)}
.np-chip-wallet{background:rgba(168,85,247,0.1);color:#c4b5fd !important;border:1px solid rgba(168,85,247,0.15)}
.np-chip-wallet:hover{background:rgba(168,85,247,0.18)}
body.light .np-chip-wallet{background:rgba(168,85,247,0.06);color:var(--neon-purple) !important}
.np-chip-success{background:rgba(16,185,129,0.08);color:#34d399 !important;border:1px solid rgba(16,185,129,0.15)}
.np-chip-success:hover{background:rgba(16,185,129,0.15);color:#34d399 !important}
body.light .np-chip-success{color:#10b981 !important}
.np-chip-danger{background:rgba(239,68,68,0.08);color:#f87171 !important;border:1px solid rgba(239,68,68,0.15)}
.np-chip-danger:hover{background:rgba(239,68,68,0.15);color:#f87171 !important}
.np-chip-lang{background:rgba(56,189,248,0.08);color:#7dd3fc !important;border:1px solid rgba(56,189,248,0.15)}
.np-chip-lang:hover{background:rgba(56,189,248,0.15);color:#7dd3fc !important}
body.light .np-chip-danger{background:rgba(239,68,68,0.04)}
body.light .np-chip-lang{background:rgba(56,189,248,0.04)}
/* ═══════════════════════════════════════════ TICKER BAR — Single-line, full-width Now sits OUTSIDE iq-navbar-custom ═══════════════════════════════════════════ */ .np-ticker-bar{background:transparent !important;overflow:hidden !important;position:relative;height:26px !important;max-height:26px !important;line-height:26px;margin:4px 20px 0 20px}
/* Fade edges — match page bg */ .np-ticker-bar::before, .np-ticker-bar::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.np-ticker-bar::before{left:0;background:linear-gradient(90deg, var(--bg-body, #0b0b1a) 0%, transparent 100%)}
.np-ticker-bar::after{right:0;background:linear-gradient(270deg, var(--bg-body, #0b0b1a) 0%, transparent 100%)}
body.light .np-ticker-bar::before{background:linear-gradient(90deg, #f0f2f5 0%, transparent 100%)}
body.light .np-ticker-bar::after{background:linear-gradient(270deg, #f0f2f5 0%, transparent 100%)}
.np-ticker-track{display:inline-flex !important;align-items:center;animation:np-ticker-scroll 35s linear infinite;white-space:nowrap !important;will-change:transform;height:26px}
.np-ticker-bar:hover .np-ticker-track{animation-play-state:paused}
.np-ticker-item{font-size:11px;font-weight:500;color:rgba(148,163,184,0.85);font-family:var(--font);padding:0 16px;flex-shrink:0}
body.light .np-ticker-item{color:rgba(100,116,139,0.7)}
.dark .np-ticker-item{color:rgba(200,210,225,0.9) !important}
.np-ticker-item a{color:rgba(168,85,247,0.85) !important;font-weight:600;text-decoration:none !important}
.dark .np-ticker-item a{color:#c084fc !important}
.np-ticker-item a:hover{color:var(--neon-purple) !important;text-decoration:underline !important}
.np-ticker-sep{color:rgba(148,163,184,0.12);font-size:5px;padding:0 2px;flex-shrink:0}
body.light .np-ticker-sep{color:rgba(0,0,0,0.06)}
@keyframes np-ticker-scroll{0%{transform:translateX(0)}
100%{transform:translateX(-50%)}
}
/* Legacy */ .announcement-bar{display:none !important}
/* ═══════════════════════════════════════════ CARDS — Glass with gradient border ═══════════════════════════════════════════ */ .card{background:var(--bg-card) !important;border:1px solid rgba(148, 163, 184, 0.1) !important;border-radius:var(--r-lg) !important;box-shadow:0 1px 4px rgba(0,0,0,0.04) !important;transition:border-color 0.2s ease, box-shadow 0.2s ease !important}
.card:hover{border-color:rgba(168, 85, 247, 0.15) !important;box-shadow:0 4px 16px rgba(168, 85, 247, 0.06) !important}
.card-body{padding:24px !important}
.card-header{background:transparent !important;border-bottom:1px solid rgba(148, 163, 184, 0.08) !important;padding:18px 24px !important}
.dark .card{background:var(--bg-card) !important;border-color:rgba(168, 85, 247, 0.06) !important}
.dark .card:hover{box-shadow:0 12px 40px rgba(168, 85, 247, 0.12) !important}
/* ═══════════════════════════════════════════ FORMS — Clean with focus glow ═══════════════════════════════════════════ */ .form-control{background:var(--bg-input) !important;border:1.5px solid rgba(148, 163, 184, 0.12) !important;border-radius:var(--r-md) !important;font-family:var(--font) !important;font-size:13.5px !important;font-weight:500 !important;padding:14px 18px !important;transition:all var(--t-fast) var(--ease-out) !important;box-shadow:none !important;color:var(--text-main) !important}
.form-control:focus{border-color:var(--neon-purple) !important;box-shadow:0 0 0 4px rgba(168, 85, 247, 0.1), var(--glow-purple) !important;background:#fff !important;outline:none !important}
.form-control:disabled{background:rgba(148, 163, 184, 0.06) !important;opacity:0.6}
.dark .form-control{background:rgba(30, 30, 60, 0.5) !important;color:var(--text-light) !important;border-color:rgba(168, 85, 247, 0.1) !important}
.dark .form-control:focus{background:rgba(30, 30, 60, 0.8) !important}
.form-label{font-family:var(--font) !important;font-weight:700 !important;font-size:13px !important;letter-spacing:0.01em;margin-bottom:10px !important}
/* ═══════════════════════════════════════════ BUTTONS — Gradient with glow ═══════════════════════════════════════════ */ .btn-primary{background:var(--grd-main) !important;background-size:200% auto !important;border:none !important;color:#fff !important;border-radius:var(--r-md) !important;font-family:var(--font) !important;font-weight:700 !important;font-size:14px !important;padding:14px 28px !important;box-shadow:0 4px 20px rgba(168, 85, 247, 0.3) !important;transition:all var(--t-fast) var(--ease-spring) !important;letter-spacing:0.02em;position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left 0.5s var(--ease-out)}
.btn-primary:hover::after{left:160%}
.btn-primary:hover{transform:translateY(-3px) scale(1.02) !important;box-shadow:0 8px 30px rgba(168, 85, 247, 0.45), 0 0 60px rgba(99,102,241,0.15) !important;background-position:right center !important;color:#fff !important}
.btn-primary:active{transform:translateY(-1px) scale(0.99) !important}
/* ═══════════════════════════════════════════ TABLES ═══════════════════════════════════════════ */ .table{font-family:var(--font) !important}
.table thead th{background:rgba(168, 85, 247, 0.04) !important;font-size:11px !important;font-weight:800 !important;text-transform:uppercase !important;letter-spacing:0.08em !important;color:var(--text-sub) !important;border:none !important;border-bottom:1px solid rgba(148,163,184,0.08) !important;padding:14px 16px !important}
.table tr th{border:none !important}
.dark .table tr th{border:none !important}
.table tbody td{font-size:13px !important;padding:14px 16px !important;border-bottom:1px solid rgba(148,163,184,0.06) !important}
.table tbody tr{transition:background var(--t-fast) !important}
.table tbody tr:hover{background:rgba(168, 85, 247, 0.03) !important}
/* ═══════════════════════════════════════════ BADGES — Pill glass ═══════════════════════════════════════════ */ .badge{font-family:var(--font) !important;font-weight:700 !important;border-radius:var(--r-full) !important;letter-spacing:0.02em}
.badge-primary, .badge.bg-primary{background:var(--grd-main) !important}
.badge-success, .badge.bg-success{background:linear-gradient(135deg, #34d399, #059669) !important}
.badge-info, .badge.bg-info{background:linear-gradient(135deg, #6366f1, #22d3ee) !important}
.badge-danger, .badge.bg-danger{background:linear-gradient(135deg, #ec4899, #ef4444) !important}
/* ═══════════════════════════════════════════ FOOTER — Dark glass ═══════════════════════════════════════════ */ .iq-footer{background:var(--grd-sidebar) !important;border-top:1px solid rgba(168, 85, 247, 0.06) !important;font-family:var(--font) !important;padding:20px 0 !important}
.iq-footer a{color:rgba(224, 231, 255, 0.5) !important;transition:all var(--t-fast) var(--ease-out)}
.iq-footer a:hover{color:var(--neon-purple) !important;text-shadow:0 0 12px rgba(168,85,247,0.3)}
.iq-footer span{font-size:12px !important;color:rgba(156,163,175,0.5) !important}
/* Floating buttons — neon glow */ .mobilephone-outer .wrap-mobilephone{background:var(--grd-main) !important;width:50px !important;height:50px !important;line-height:50px !important;font-size:20px !important;box-shadow:0 4px 24px rgba(168, 85, 247, 0.4), 0 0 40px rgba(99,102,241,0.15) !important;transition:all var(--t-fast) var(--ease-spring) !important}
.mobilephone-outer .wrap-mobilephone:hover{transform:translate(-50%, -50%) scale(1.15) !important;box-shadow:0 6px 32px rgba(168, 85, 247, 0.6), 0 0 60px rgba(99,102,241,0.25) !important}
.mobilephone-outer .border-small-mobilephone{width:50px !important;height:50px !important;top:5px !important;left:5px !important}
@keyframes scale-phone{from{transform:scale(1);border:4px rgba(168,85,247,0.5) solid}
to{transform:scale(2.2);border:4px rgba(168,85,247,0) solid}
}
/* ═══════════════════════════════════════════ PLATFORM BUTTONS ═══════════════════════════════════════════ */ .nwo-cat-btn{border-radius:var(--r-md) !important;transition:all var(--t-fast) var(--ease-spring) !important;font-family:var(--font) !important;font-weight:600 !important;border:1.5px solid rgba(148,163,184,0.1) !important;position:relative;overflow:hidden}
.nwo-cat-btn:hover{border-color:rgba(168,85,247,0.3) !important;box-shadow:0 4px 20px rgba(168,85,247,0.12), var(--glow-purple) !important;transform:translateY(-3px) !important}
.nwo-cat-btn[style*="background-color:blueviolet"], .nwo-cat-btn[style*="background-color:blueviolet"]{background:var(--grd-main) !important;border-color:transparent !important;color:#fff !important;box-shadow:0 4px 24px rgba(168,85,247,0.4), 0 0 40px rgba(99,102,241,0.1) !important}
/* ═══════════════════════════════════════════ DROPDOWNS — Glass ═══════════════════════════════════════════ */ .dropdown-menu{background:var(--bg-card) !important;border:1px solid rgba(148,163,184,0.08) !important;border-radius:var(--r-md) !important;box-shadow:0 16px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(168,85,247,0.04) !important;padding:8px !important;animation:dropdown-in 0.2s var(--ease-out)}
@keyframes dropdown-in{from{opacity:0;transform:translateY(-8px) scale(0.96)}
to{opacity:1;transform:translateY(0) scale(1)}
}
.dropdown-item{border-radius:var(--r-sm) !important;font-family:var(--font) !important;font-size:13px !important;font-weight:500 !important;padding:10px 14px !important;transition:all var(--t-fast) !important}
.dropdown-item:hover{background:rgba(168,85,247,0.06) !important;color:var(--neon-purple) !important}
.dark .dropdown-menu{background:rgba(17,17,40,0.9) !important;border-color:rgba(168,85,247,0.1) !important}
.iq-sub-dropdown{border-radius:var(--r-lg) !important;box-shadow:0 16px 48px rgba(0,0,0,0.15) !important;overflow:hidden}
/* ═══════════════════════════════════════════ MODALS ═══════════════════════════════════════════ */ .modal-content{border-radius:var(--r-xl) !important;box-shadow:0 24px 64px rgba(0,0,0,0.15), 0 0 0 1px rgba(168,85,247,0.06) !important;border:none !important;overflow:hidden}
.modal-header{background:transparent !important;border-bottom:1px solid rgba(148,163,184,0.08) !important;padding:20px 28px !important}
.modal-body{padding:28px !important}
/* ═══════════════════════════════════════════ SWAL2 — Match theme ═══════════════════════════════════════════ */ .swal2-popup{border-radius:var(--r-xl) !important;font-family:var(--font) !important;box-shadow:0 24px 64px rgba(0,0,0,0.15) !important}
.swal2-title{font-family:var(--font) !important;font-weight:800 !important}
.swal2-styled.swal2-confirm{background:var(--grd-main) !important;border-radius:var(--r-md) !important;font-family:var(--font) !important;font-weight:700 !important;padding:14px 32px !important;box-shadow:0 4px 20px rgba(168,85,247,0.3) !important}
/* ═══════════════════════════════════════════ NAV OVERRIDE ═══════════════════════════════════════════ */ .nav-link{font-family:var(--font) !important}
/* Welcome card */ .alert.bg-white.alert-primary{border:none !important;border-radius:var(--r-lg) !important}
/* Title comm */ .title-comm{background:transparent !important}
.title-comm .title-holder{background:var(--grd-main) !important;border-radius:var(--r-full) !important;padding:0 24px !important;line-height:42px !important;min-width:auto !important;box-shadow:0 4px 16px rgba(168,85,247,0.25) !important}
.title-holder:before, .title-holder:after{display:none !important}
h3.title-comm:before{border-top-color:rgba(148,163,184,0.1) !important}
/* ═══════════════════════════════════════════ PAGE ANIMATION ═══════════════════════════════════════════ */ .content-page{animation:page-enter 0.5s var(--ease-out)}
@keyframes page-enter{from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}
/* ═══════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════ */ @media (max-width:991px){.badge2{padding:6px 12px !important;font-size:11px !important}
.card-body{padding:16px !important}
}
@media (max-width:600px){.badge2{padding:5px 10px !important;font-size:10px !important}
}
/* ═══════════════════════════════════════════ ✨ GEN Z — BODY BACKGROUND (lightweight) ═══════════════════════════════════════════ */ body{background:#f8f9fc !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — PLATFORM BUTTONS (service page) ═══════════════════════════════════════════ */ .nwo-cat-btn{display:flex !important;align-items:center !important;gap:12px !important;background:var(--bg-card, #fff) !important;border:1.5px solid rgba(148,163,184,0.1) !important;border-radius:18px !important;padding:12px 20px 12px 12px !important;box-shadow:0 2px 12px rgba(0,0,0,0.04) !important;transition:all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;cursor:pointer !important;position:relative !important;overflow:hidden !important;font-family:var(--font) !important}
.nwo-cat-btn:hover{transform:translateY(-2px) !important;box-shadow:0 4px 16px rgba(168,85,247,0.12) !important;border-color:rgba(168,85,247,0.25) !important}
.nwo-cat-btn:active{transform:scale(0.98) !important}
/* Platform button ICON */ .nwo-cat-btn .icon{width:40px !important;height:40px !important;min-width:40px !important;display:flex !important;align-items:center !important;justify-content:center !important;border-radius:12px !important;font-size:18px !important;background:linear-gradient(135deg, rgba(168,85,247,0.08), rgba(99,102,241,0.08)) !important;color:#a855f7 !important;transition:all 0.25s ease !important}
.nwo-cat-btn:hover .icon{background:var(--grd-main, linear-gradient(135deg, #a855f7, #6366f1, #22d3ee)) !important;color:#fff !important;box-shadow:0 4px 16px rgba(168,85,247,0.3) !important;transform:scale(1.1) !important}
/* Platform button TEXT */ .nwo-cat-btn .text{font-weight:600 !important;font-size:13px !important;color:var(--text-main, #111827) !important;font-family:var(--font) !important;transition:color 0.2s ease !important}
.nwo-cat-btn:hover .text{color:var(--text-main, #111827) !important}
/* Active / selected platform */ .nwo-cat-btn.active, .nwo-cat-btn[style*="background-color:blueviolet"], .nwo-cat-btn[style*="background-color:blueviolet"]{background:var(--grd-main, linear-gradient(135deg, #a855f7, #6366f1, #22d3ee)) !important;border-color:transparent !important;box-shadow:0 6px 24px rgba(168,85,247,0.4), 0 0 50px rgba(99,102,241,0.1) !important}
.nwo-cat-btn.active .icon, .nwo-cat-btn[style*="background-color:blueviolet"] .icon, .nwo-cat-btn[style*="background-color:blueviolet"] .icon{background:rgba(255,255,255,0.2) !important;color:#fff !important;box-shadow:none !important}
.nwo-cat-btn.active .text, .nwo-cat-btn[style*="background-color:blueviolet"] .text, .nwo-cat-btn[style*="background-color:blueviolet"] .text{color:#fff !important}
.nwo-cat-btn.active:hover{transform:translateY(-4px) scale(1.03) !important;box-shadow:0 10px 32px rgba(168,85,247,0.5), 0 0 60px rgba(99,102,241,0.15) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — SERVICE PAGE ROOT ═══════════════════════════════════════════ */ .root{font-family:var(--font) !important;background:transparent !important}
.page-content, section{font-family:var(--font) !important}
/* Swiper override */ .swiper.nwo-categories{padding:12px 0 20px !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — SERVICE FORM CARD ═══════════════════════════════════════════ */ .nwo-fi-card{border-radius:var(--r-xl, 32px) !important;overflow:hidden !important;border:none !important}
/* header-nav (tabs in service card) */ .header-nav{gap:8px !important;padding:0 20px !important;font-family:var(--font) !important}
.header-nav .nav-link{padding:16px 4px !important;gap:10px !important;font-family:var(--font) !important}
.header-nav .nav-link-icon{width:32px !important;height:32px !important;border-radius:var(--r-sm, 10px) !important;font-size:16px !important}
.header-nav .nav-link.active .nav-link-icon{background:rgba(168,85,247,0.1) !important;color:#a855f7 !important}
.header-nav .nav-link.active::after{background:var(--grd-main, linear-gradient(135deg, #a855f7, #6366f1)) !important;height:3px !important;border-radius:3px 3px 0 0 !important}
.header-nav .nav-link-text{font-size:13.5px !important;font-weight:600 !important;font-family:var(--font) !important}
/* card-custom-title */ .card-custom-title::after{background:var(--grd-main, linear-gradient(135deg, #a855f7, #6366f1)) !important;border-radius:2px !important}
/* d-head-icon */ .d-head-icon{background:linear-gradient(135deg, rgba(168,85,247,0.1), rgba(99,102,241,0.08)) !important;color:#a855f7 !important;border-radius:var(--r-sm, 10px) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — FORM SELECT (new_order style) ═══════════════════════════════════════════ */ .form-select{background-color:var(--bg-input, #f8f9fc) !important;border:1.5px solid rgba(148,163,184,0.12) !important;border-radius:var(--r-md, 16px) !important;font-family:var(--font) !important;font-size:13.5px !important;font-weight:500 !important;color:var(--text-main, #111827) !important;transition:all 0.2s ease !important;height:auto !important;padding:14px 18px !important}
.form-select:focus{border-color:#a855f7 !important;box-shadow:0 0 0 4px rgba(168,85,247,0.1), 0 0 30px rgba(168,85,247,0.15) !important;background-color:#fff !important;outline:none !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — TAGS/CATEGORY BADGES ═══════════════════════════════════════════ */ .badge.bg-success{background:linear-gradient(135deg, #34d399, #059669) !important;border:none !important;padding:5px 12px !important;font-size:11px !important;font-weight:700 !important;border-radius:var(--r-full, 9999px) !important;box-shadow:0 2px 8px rgba(52,211,153,0.25) !important;font-family:var(--font) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — SECTION HEADINGS / LINKS ═══════════════════════════════════════════ */ a{transition:color 0.15s ease, text-shadow 0.15s ease !important}
a:hover{text-shadow:0 0 12px rgba(168,85,247,0.2)}
/* Text gradient utility */ .text-gradient{background:var(--grd-main) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;background-clip:text !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — PAGINATION ═══════════════════════════════════════════ */ .pagination .page-item .page-link{border-radius:var(--r-sm, 10px) !important;font-family:var(--font) !important;font-weight:600 !important;transition:all 0.2s ease !important;border:none !important;margin:0 2px !important}
.pagination .page-item.active .page-link{background:var(--grd-main) !important;color:#fff !important;box-shadow:0 4px 16px rgba(168,85,247,0.25) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — ALERT / INFO BOXES ═══════════════════════════════════════════ */ .alert{border-radius:var(--r-md, 16px) !important;font-family:var(--font) !important;border:none !important}
.alert-primary{background:rgba(168,85,247,0.06) !important;color:#7c3aed !important;border:1px solid rgba(168,85,247,0.12) !important}
.alert-info{background:rgba(34,211,238,0.06) !important;color:#0891b2 !important;border:1px solid rgba(34,211,238,0.12) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — SERVICE FORM LABELS & BADGES ═══════════════════════════════════════════ */ /* Form label — clean */ .form-group .form-label, .mb-4 .form-label{font-family:var(--font) !important;font-weight:700 !important;font-size:14px !important;color:var(--text-main, #111827) !important;display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:8px !important;margin-bottom:12px !important;line-height:1.6 !important}
/* Platform icon next to label */ .form-label i#icon-platform{font-size:16px !important;color:var(--neon-purple, #a855f7) !important}
.form-label i.text-blue{color:var(--neon-purple, #a855f7) !important}
/* "Sở thích của bạn" preference badge */ .form-label .badge.bg-success{background:linear-gradient(135deg, #a855f7, #6366f1) !important;color:#fff !important;font-size:11px !important;font-weight:600 !important;padding:5px 14px !important;border-radius:100px !important;letter-spacing:0.02em !important;box-shadow:0 2px 12px rgba(168,85,247,0.25) !important;font-family:var(--font) !important;border:none !important;display:inline-flex !important;align-items:center !important;gap:4px !important;animation:none !important}
.form-label .badge.bg-success i{font-size:11px !important}
/* "Bắt buộc sử dụng Server" info line */ .form-group label.text-sm.text-blue, .form-group .text-sm.text-blue{display:flex !important;align-items:center !important;flex-wrap:wrap !important;gap:6px !important;background:rgba(168, 85, 247, 0.04) !important;border:1px solid rgba(168, 85, 247, 0.08) !important;border-radius:12px !important;padding:10px 16px !important;margin-bottom:14px !important;font-family:var(--font) !important;font-size:12px !important;font-weight:500 !important;color:var(--text-sub, #6b7280) !important;line-height:1.6 !important}
/* "Bắt buộc" badge */ .form-group .text-sm strong.badge-primary, strong.badge-primary{background:linear-gradient(135deg, #ef4444, #ec4899) !important;color:#fff !important;font-size:10px !important;font-weight:700 !important;padding:3px 10px !important;border-radius:100px !important;letter-spacing:0.04em !important;text-transform:uppercase !important;display:inline-flex !important;align-items:center !important;font-family:var(--font) !important}
/* Server pills — "Server 2", "Server 3" */ .form-group .text-sm strong.badge-info, strong.badge-info{background:rgba(99, 102, 241, 0.1) !important;color:#6366f1 !important;font-size:11px !important;font-weight:700 !important;padding:3px 10px !important;border-radius:100px !important;letter-spacing:0.02em !important;font-family:var(--font) !important;display:inline-flex !important;align-items:center !important}
/* Social icons in the server info line */ .form-group .text-sm i.fab, .text-sm.text-blue i.fab{font-size:13px !important;color:var(--text-muted, #9ca3af) !important;opacity:0.6;transition:all 0.2s !important}
.form-group .text-sm i.fab:hover{color:var(--neon-purple, #a855f7) !important;opacity:1}
/* ═══════════════════════════════════════════ ✨ GEN Z — FORM GROUP SPACING ═══════════════════════════════════════════ */ .form-group.mb-4{margin-bottom:24px !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — PRICE & DISABLED FIELDS ═══════════════════════════════════════════ */ input#charge, input[name="charge"]{background:linear-gradient(135deg, rgba(168,85,247,0.06), rgba(99,102,241,0.06)) !important;border:1.5px solid rgba(168,85,247,0.12) !important;color:var(--neon-purple, #a855f7) !important;font-weight:700 !important;font-size:15px !important;font-family:var(--font) !important}
input#charge-total, input[name="charge-total"]{background:linear-gradient(135deg, rgba(52,211,153,0.06), rgba(5,150,105,0.06)) !important;border:1.5px solid rgba(52,211,153,0.12) !important;color:#059669 !important;font-weight:700 !important;font-size:15px !important;font-family:var(--font) !important}
.form-control:disabled, .form-control[disabled]{cursor:not-allowed !important;opacity:0.7 !important}
/* Override the ugly #47b9f3 inline style for price */ input[style*="background-color:#47b9f3"], input[style*="background-color:#47b9f3"]{background:linear-gradient(135deg, rgba(168,85,247,0.06), rgba(99,102,241,0.06)) !important;border:1.5px solid rgba(168,85,247,0.12) !important;color:var(--neon-purple, #a855f7) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — TEXTAREA ═══════════════════════════════════════════ */ textarea.form-control{min-height:120px !important;line-height:1.6 !important;resize:vertical !important;height:auto !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — FORMATTED DESCRIPTION CARD ═══════════════════════════════════════════ */ .description-card{background:var(--bg-input, #f8f9fc) !important;border:1.5px solid rgba(148, 163, 184, 0.1);border-radius:16px;padding:20px 24px;font-family:var(--font);min-height:120px;max-height:400px;overflow-y:auto}
.description-card::-webkit-scrollbar{width:4px}
.description-card::-webkit-scrollbar-thumb{background:rgba(168,85,247,0.2);border-radius:100px}
.description-placeholder{color:var(--text-muted, #9ca3af) !important;font-size:13px;font-style:italic;text-align:center;padding:24px 0;margin:0}
.desc-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid rgba(148, 163, 184, 0.06);font-size:13px;line-height:1.6}
.desc-item:last-child{border-bottom:none}
.desc-key{flex-shrink:0;font-weight:700;color:var(--text-main, #111827);background:rgba(168, 85, 247, 0.06);padding:2px 10px;border-radius:6px;font-size:12px;white-space:nowrap}
.desc-val{color:var(--text-sub, #6b7280);font-weight:500}
.desc-bullet{flex-shrink:0;color:var(--neon-purple, #a855f7);font-weight:700;font-size:14px;line-height:1.5}
.desc-text{color:var(--text-sub, #6b7280);font-weight:500}
.desc-warning{background:rgba(251, 146, 60, 0.06);border:1px solid rgba(251, 146, 60, 0.1);border-radius:10px;padding:10px 14px;margin:10px 0;display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-sub, #6b7280);font-weight:500;line-height:1.6}
.desc-warning-badge{font-weight:800;font-size:12px;color:#d97706;text-transform:uppercase;letter-spacing:0.04em}
/* ═══════════════════════════════════════════ ✨ GEN Z — DESCRIPTION TEXT ═══════════════════════════════════════════ */ .form-group p .text-sm.text-muted, p .text-sm.text-muted{font-size:12px !important;color:var(--text-muted, #9ca3af) !important;font-family:var(--font) !important;font-weight:500 !important;line-height:1.6 !important;display:inline-block !important;background:rgba(251, 146, 60, 0.06) !important;padding:6px 14px !important;border-radius:8px !important;border:1px solid rgba(251, 146, 60, 0.1) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — SUBMIT BUTTON ═══════════════════════════════════════════ */ .btn-border.btn-100, .btn.btn-primary.btn-border.btn-100{width:100% !important;padding:16px 32px !important;font-size:15px !important;font-weight:700 !important;border-radius:16px !important;letter-spacing:0.03em !important;text-transform:none !important;font-family:var(--font) !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — SELECT2 / Custom Dropdown Override ═══════════════════════════════════════════ */ .select2-container--default .select2-selection--single{background:var(--bg-input, #f8f9fc) !important;border:1.5px solid rgba(148,163,184,0.12) !important;border-radius:16px !important;height:auto !important;min-height:48px !important;font-family:var(--font) !important;padding:8px 12px !important}
.select2-container--default .select2-selection--single .select2-selection__rendered{font-size:13.5px !important;font-weight:500 !important;color:var(--text-main, #111827) !important;font-family:var(--font) !important;line-height:30px !important}
.select2-container--default .select2-selection--single .select2-selection__arrow{top:50% !important;transform:translateY(-50%) !important;right:12px !important}
.select2-container--default.select2-container--open .select2-selection--single{border-color:var(--neon-purple, #a855f7) !important;box-shadow:0 0 0 4px rgba(168,85,247,0.1), 0 0 30px rgba(168,85,247,0.1) !important}
.select2-dropdown{border:1px solid rgba(148,163,184,0.1) !important;border-radius:16px !important;box-shadow:0 12px 40px rgba(0,0,0,0.1) !important;overflow:hidden !important;font-family:var(--font) !important}
.select2-results__option{font-size:13px !important;font-weight:500 !important;padding:10px 16px !important;font-family:var(--font) !important;transition:background 0.15s !important}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:linear-gradient(135deg, rgba(168,85,247,0.08), rgba(99,102,241,0.08)) !important;color:var(--neon-purple, #a855f7) !important}
.select2-container--default .select2-results__option[aria-selected=true]{background:linear-gradient(135deg, rgba(168,85,247,0.12), rgba(99,102,241,0.12)) !important;color:#7c3aed !important;font-weight:600 !important}
.select2-search--dropdown .select2-search__field{border:1.5px solid rgba(148,163,184,0.12) !important;border-radius:10px !important;padding:10px 14px !important;font-family:var(--font) !important;font-size:13px !important}
.select2-search--dropdown .select2-search__field:focus{border-color:var(--neon-purple, #a855f7) !important;box-shadow:0 0 0 3px rgba(168,85,247,0.1) !important;outline:none !important}
/* ═══════════════════════════════════════════ ✨ GEN Z — CONTENT WRAPPER ═══════════════════════════════════════════ */ .content-page .container-fluid{font-family:var(--font) !important}
/* ═══════════════════════════════════════════ ✨ RESPONSIVE — PLATFORM GRID Force swiper-wrapper to behave as CSS grid ═══════════════════════════════════════════ */ .nwo-categories .swiper-wrapper{display:flex !important;flex-wrap:wrap !important;gap:10px !important}
.nwo-categories .swiper-slide{width:auto !important;flex:0 0 auto !important;padding:0 !important;margin:0 !important}
.nwo-categories .swiper-wrapper::before, .nwo-categories .swiper-wrapper::after{display:none !important}
/* ═══════════════════════════════════════════ ✨ RESPONSIVE — DESKTOP 1300+ ═══════════════════════════════════════════ */ @media (min-width:1300px){.content-page{margin-left:260px !important;transition:margin 0.35s cubic-bezier(0.16,1,0.3,1) !important}
body.sidebar-main .content-page{margin-left:80px !important}
}
/* ═══════════════════════════════════════════ ✨ RESPONSIVE — TABLET & MOBILE < 1300px Sidebar slides in/out with smooth animation ═══════════════════════════════════════════ */ @media (max-width:1299px){.content-page{margin-left:0 !important;transition:none !important}
.iq-top-navbar{left:0 !important;width:100% !important}
/* Sidebar:starts hidden, slides in when body.sidebar-main is toggled */ .iq-sidebar.sidebar-default{left:-260px !important;transition:left 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;z-index:99999 !important;position:fixed !important;top:0 !important;bottom:0 !important;width:260px !important}
body.sidebar-main .iq-sidebar.sidebar-default{left:0 !important}
/* Overlay backdrop */ body.sidebar-main::after{content:'';position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);z-index:99998;animation:fade-in 0.25s ease}
}
@keyframes fade-in{from{opacity:0}
to{opacity:1}
}
/* ═══════════════════════════════════════════ ✨ RESPONSIVE — MOBILE ≤ 991px ═══════════════════════════════════════════ */ @media (max-width:991px){/* Top navbar — compact glass bar */ .iq-top-navbar{padding:6px 10px 0 10px !important}
.iq-navbar-custom{padding:4px 10px !important;border-radius:12px !important}
/* Chips row — single line, scroll if needed */ .side-menu-bt-sidebar{display:flex !important;flex-wrap:nowrap !important;gap:6px !important;align-items:center !important;padding:4px 0 !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.side-menu-bt-sidebar::-webkit-scrollbar{display:none}
/* Smaller chips on mobile */ .np-chip{padding:4px 10px !important;font-size:11px !important;white-space:nowrap !important;flex-shrink:0 !important}
.np-chip i{font-size:10px !important}
/* Hide language chip on mobile to save space */ .np-chip-lang{display:none !important}
/* Wallet chip — compact */ .np-chip-wallet{max-width:180px !important;overflow:hidden !important;text-overflow:ellipsis !important}
/* Dark/Light toggle — smaller on mobile */ .custom-switch-icon .custom-control-label{width:44px !important;height:24px !important}
.custom-switch-icon .custom-control-label::before{width:18px !important;height:18px !important}
.custom-control-input:checked ~ .custom-control-label::before{transform:translateX(20px) !important}
.switch-icon-left svg, .switch-icon-right svg{width:10px !important;height:10px !important}
.change-mode{padding:0 4px !important}
/* User area — compact */ .user-name{display:none !important}
.navbar-list .nav-item .avatar-rounded{width:30px !important;height:30px !important}
/* Hamburger icon — smaller */ .wrapper-menu{width:22px !important;height:22px !important}
/* Ticker — subtle single line */ .np-ticker-bar{height:24px !important;max-height:24px !important;line-height:24px !important;margin:2px 10px 0 10px !important}
.np-ticker-track{height:24px !important}
.np-ticker-item{font-size:10px !important;padding:0 12px !important}
.np-ticker-sep{font-size:4px !important}
/* Cards */ .card-body{padding:14px !important}
.card{border-radius:16px !important}
/* Platform buttons — fill 2 columns */ .nwo-categories .swiper-wrapper{display:grid !important;grid-template-columns:repeat(2, 1fr) !important;gap:8px !important}
.nwo-categories .swiper-slide{width:100% !important}
.nwo-cat-btn{width:100% !important;padding:10px 14px 10px 10px !important;gap:10px !important;border-radius:14px !important}
.nwo-cat-btn .icon{width:36px !important;height:36px !important;min-width:36px !important;border-radius:10px !important;font-size:16px !important}
.nwo-cat-btn .text{font-size:12px !important}
/* Content */ .container{padding-left:10px !important;padding-right:10px !important}
/* Forms */ .form-control{font-size:13px !important}
.form-select{font-size:13px !important}
/* Search box */ #smart-search-wrapper .form-control{padding:10px 16px 10px 40px !important;font-size:13px !important}
#smart-search-wrapper i{left:14px !important;font-size:13px !important}
}
/* ═══════════════════════════════════════════ ✨ RESPONSIVE — SMALL MOBILE ≤ 600px ═══════════════════════════════════════════ */ @media (max-width:600px){.iq-top-navbar{padding:4px 8px 0 8px !important}
.iq-navbar-custom{padding:4px 8px !important;border-radius:10px !important}
/* Chips even smaller */ .np-chip{padding:3px 8px !important;font-size:10px !important}
.np-chip i{font-size:9px !important}
.np-chip-wallet{max-width:150px !important}
/* Hide "Nạp tiền" / "Deposit" text, keep icon */ .np-chip-success{font-size:0 !important;gap:0 !important;padding:5px 6px !important}
.np-chip-success i{font-size:12px !important}
.np-chip-danger{font-size:0 !important;gap:0 !important;padding:5px 6px !important}
.np-chip-danger i{font-size:12px !important}
/* Toggle even smaller */ .custom-switch-icon .custom-control-label{width:38px !important;height:20px !important}
.custom-switch-icon .custom-control-label::before{width:16px !important;height:16px !important;top:2px !important;left:2px !important}
.custom-control-input:checked ~ .custom-control-label::before{transform:translateX(18px) !important}
.switch-icon-left svg, .switch-icon-right svg{width:8px !important;height:8px !important}
/* Stack platform buttons */ .nwo-categories .swiper-wrapper{grid-template-columns:repeat(2, 1fr) !important;gap:6px !important}
.nwo-cat-btn{padding:8px 10px 8px 8px !important;gap:8px !important;border-radius:12px !important}
.nwo-cat-btn .icon{width:32px !important;height:32px !important;min-width:32px !important;font-size:14px !important;border-radius:8px !important}
.nwo-cat-btn .text{font-size:11px !important}
.card-body{padding:10px !important}
.card{border-radius:14px !important}
/* Ticker */ .np-ticker-bar{margin:2px 8px 0 8px !important}
.np-ticker-item{font-size:9px !important;padding:0 10px !important}
}
/* ═══════════════════════════════════════════ ✨ RESPONSIVE — VERY SMALL ≤ 380px ═══════════════════════════════════════════ */ @media (max-width:380px){.nwo-categories .swiper-wrapper{grid-template-columns:1fr 1fr !important;gap:4px !important}
.nwo-cat-btn{padding:6px 8px !important;gap:6px !important;border-radius:10px !important}
.nwo-cat-btn .icon{width:28px !important;height:28px !important;min-width:28px !important;font-size:13px !important}
.nwo-cat-btn .text{font-size:10px !important}
.badge2{padding:4px 8px !important;font-size:9px !important}
}
/* ═══════════════════════════════════════════ ✨ LANDSCAPE / WIDE MOBILE ═══════════════════════════════════════════ */ @media (max-width:991px) and (orientation:landscape){.nwo-categories .swiper-wrapper{grid-template-columns:repeat(4, 1fr) !important}
}
/* ═══════════════════════════════════════════ ✨ MEDIUM SCREENS (tablet landscape) ═══════════════════════════════════════════ */ @media (min-width:768px) and (max-width:991px){.nwo-categories .swiper-wrapper{grid-template-columns:repeat(3, 1fr) !important}
}
/* ═══════════════════════════════════════════ ✨ LARGE SCREENS (1000–1299) ═══════════════════════════════════════════ */ @media (min-width:992px) and (max-width:1299px){.nwo-categories .swiper-wrapper{display:flex !important;flex-wrap:wrap !important}
.nwo-categories .swiper-slide{flex:0 0 auto !important}
}
/* ═══════════════════════════════════════════ 🎯 SIDEBAR TOGGLE — Hamburger ↔ X Animation ═══════════════════════════════════════════ */ .side-menu-bt-sidebar .wrapper-menu{cursor:pointer;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.side-menu-bt-sidebar .wrapper-menu:hover{transform:scale(1.1)}
/* On mobile:hamburger shows by default, X when sidebar is open */ @media (max-width:1299px){.side-menu-bt-sidebar .wrapper-menu path{transition:d 0.3s ease, opacity 0.2s ease}
body.sidebar-main .side-menu-bt-sidebar .wrapper-menu{transform:rotate(90deg)}
}
/* Desktop sidebar collapse */ @media (min-width:1300px){body.sidebar-main .iq-sidebar.sidebar-default{width:80px !important;overflow:hidden !important}
body.sidebar-main .iq-sidebar-menu .side-menu li a span, body.sidebar-main .iq-sidebar-menu .side-menu li a .badge{display:none !important}
body.sidebar-main .iq-sidebar-menu .side-menu li.px-3 span{display:none !important}
body.sidebar-main .iq-sidebar-logo .header-logo img{height:30px !important}
body.sidebar-main .iq-sidebar-menu .side-menu li a{justify-content:center !important;padding:9px 0 !important}
body.sidebar-main .iq-sidebar-menu .side-menu li a i{margin:0 !important}
body.sidebar-main .side-menu-bt-sidebar-1{display:none !important}
}
/* ═══════════════════════════════════════════ 🔍 DESKTOP SEARCH — Premium Styling ═══════════════════════════════════════════ */ @media (min-width:992px){#smart-search-wrapper > div{border-radius:16px !important;background:linear-gradient(135deg, rgba(168,85,247,0.15), rgba(56,189,248,0.08), rgba(168,85,247,0.15)) !important;padding:1.5px !important;box-shadow:0 2px 20px rgba(168,85,247,0.06) !important;transition:box-shadow 0.3s ease, background 0.3s ease !important}
#smart-search-wrapper > div:focus-within{background:linear-gradient(135deg, rgba(168,85,247,0.3), rgba(56,189,248,0.2), rgba(168,85,247,0.3)) !important;box-shadow:0 4px 30px rgba(168,85,247,0.12) !important}
#global-service-search{padding:14px 24px 14px 48px !important;font-size:15px !important;border-radius:14px !important;background:rgba(10,10,24,0.95) !important;backdrop-filter:blur(10px) !important}
body.light #global-service-search{background:#fff !important}
#smart-search-wrapper i{left:18px !important;font-size:15px !important;color:rgba(168,85,247,0.6) !important}
#global-search-results{border-radius:0 0 16px 16px !important;box-shadow:0 12px 40px rgba(0,0,0,0.3) !important;background:rgba(15,15,30,0.98) !important;backdrop-filter:blur(20px) !important}
body.light #global-search-results{background:#fff !important;box-shadow:0 8px 30px rgba(0,0,0,0.1) !important}
}
/* ═══════════════════════════════════════════ 📜 POLICY PAGES ═══════════════════════════════════════════ */ .policy-content h2{color:#f1f5f9 !important}
body.light .policy-content h2{color:#1e293b !important}
.policy-content p, .policy-content li{color:rgba(148,163,184,0.85) !important}
body.light .policy-content p, body.light .policy-content li{color:#475569 !important}
.policy-content a{color:var(--neon-purple) !important}
.policy-content ul{padding-left:20px}
.policy-content li{margin-bottom:6px}
/* ═══════════════════════════════════════════ ✨ PRINT ═══════════════════════════════════════════ */ @media print{.iq-sidebar, .iq-top-navbar, .iq-footer, .mobilephone-outer, .announcement-bar, .np-ticker-bar{display:none !important}
body::before{display:none !important}
.content-page{margin-left:0 !important}
}
/* ═══════════════════════════════════════════ 🌞 COMPREHENSIVE LIGHT MODE FIXES Ensures ALL text is readable on light backgrounds ═══════════════════════════════════════════ */ /* Footer — light mode */ body.light .iq-footer{background:linear-gradient(180deg, #f8f9fc 0%, #f0f2f5 100%) !important;border-top:1px solid rgba(0,0,0,0.06) !important}
body.light .iq-footer a{color:#64748b !important}
body.light .iq-footer a:hover{color:var(--neon-purple) !important}
body.light .iq-footer span{color:#94a3b8 !important}
/* Loading overlay — light mode */ body.light #loading_ok{background:rgba(255,255,255,0.92) !important}
body.light #loading-text{color:#1e293b !important}
body.light #close-button{background:rgba(0,0,0,0.04) !important;color:#64748b !important;border-color:rgba(0,0,0,0.1) !important}
body.light #close-button:hover{background:rgba(239,68,68,0.08) !important;color:#ef4444 !important}
/* Table cells — light mode text */ body.light .table tbody td{color:#1e293b !important}
body.light .table tbody td a{color:var(--neon-purple) !important}
body.light .table thead th{color:#6b7280 !important;background:#f8fafc !important}
/* Card headers — light mode */ body.light .card-header{background:#fafbfc !important;border-bottom-color:rgba(0,0,0,0.06) !important}
body.light .card-header h4, body.light .card-header .card-title{color:#1e293b !important}
/* Modal — light mode */ body.light .modal-content{background:#fff !important}
body.light .modal-header{border-bottom-color:rgba(0,0,0,0.06) !important}
body.light .modal-body{color:#1e293b !important}
/* SweetAlert — light mode */ body.light .swal2-popup{background:#fff !important;color:#1e293b !important}
body.light .swal2-title{color:#1e293b !important}
body.light .swal2-html-container{color:#475569 !important}
/* Select2 — light mode */ body.light .select2-container--default .select2-selection--single{background:#fff !important;border-color:#e2e8f0 !important}
body.light .select2-container--default .select2-selection--single .select2-selection__rendered{color:#1e293b !important}
body.light .select2-dropdown{background:#fff !important;border-color:#e2e8f0 !important}
body.light .select2-results__option{color:#1e293b !important}
body.light .select2-container--default .select2-results__option--highlighted[aria-selected]{color:var(--neon-purple) !important}
body.light .select2-search--dropdown .select2-search__field{background:#fff !important;color:#1e293b !important;border-color:#e2e8f0 !important}
/* Dropdown menu — light mode */ body.light .dropdown-menu{background:#fff !important;border-color:rgba(0,0,0,0.08) !important;box-shadow:0 8px 30px rgba(0,0,0,0.08) !important}
body.light .dropdown-item{color:#1e293b !important}
body.light .dropdown-item:hover{background:rgba(168,85,247,0.04) !important;color:var(--neon-purple) !important}
/* Form controls — light mode (ensure text readability) */ body.light .form-control{background:#fff !important;color:#1e293b !important;border-color:#e2e8f0 !important}
body.light .form-control:disabled{background:#f8f9fc !important;color:#64748b !important}
body.light .form-label{color:#1e293b !important}
/* Description card — dark mode override */ .dark .description-card{background:rgba(30,30,60,0.5) !important;border-color:rgba(168,85,247,0.1) !important}
.dark .desc-key{color:#e0e7ff !important;background:rgba(168,85,247,0.15) !important}
.dark .desc-val, .dark .desc-text{color:#94a3b8 !important}
.dark .desc-warning{background:rgba(251,146,60,0.1) !important;border-color:rgba(251,146,60,0.2) !important}
/* Nav link — light mode */ body.light .nav-link{background:#fff !important;color:#1e293b !important;border-color:#e2e8f0 !important;box-shadow:0 1px 3px rgba(0,0,0,0.04) !important}
body.light .nav-pills .nav-item a{color:#475569 !important}
body.light .nav-pills .nav-item a.active, body.light .nav-pills .nav-item a:hover{color:#fff !important}
/* Sub-dropdown — light mode */ body.light .iq-sub-dropdown{background:#fff !important;box-shadow:0 8px 30px rgba(0,0,0,0.08) !important}
/* Notification items */ body.light .iq-sub-dropdown .iq-sub-card{border-bottom-color:rgba(0,0,0,0.04) !important}
/* Info banner — light mode */ body.light .info-banner{background:linear-gradient(135deg,rgba(168,85,247,0.04),rgba(56,189,248,0.03)) !important;border-color:rgba(168,85,247,0.08) !important;color:#475569 !important}
/* Charge fields — ensure readability in both modes */ body.light input#charge, body.light input[name="charge"]{color:var(--neon-purple) !important}
body.light input#charge-total, body.light input[name="charge-total"]{color:#059669 !important}
/* Generic text helpers — light mode */ body.light .text-white{color:#1e293b !important}
body.light h1, body.light h2, body.light h3, body.light h4, body.light h5, body.light h6{color:#1e293b !important}
body.light p{color:#475569 !important}
/* Alert readable in light mode */ body.light .alert.bg-white{background:#fff !important;color:#1e293b !important}
/* ═══════════════════════════════════════════ 🏠 LANDING PAGE (home.html) LIGHT MODE Override inline dark-theme colors ═══════════════════════════════════════════ */ /* Hero section text — white text invisible on light bg */ body.light .np-hero h1, body.light .np-hero h2, body.light .np-hero h3, body.light section h1, body.light section h2, body.light section h3{color:#1e293b !important}
body.light .np-hero p, body.light section p{color:#475569 !important}
/* Override ALL inline rgba(255,255,255,...) colors in light mode */ body.light .np-hero [style*="color:rgba(255,255,255"], body.light .np-hero [style*="color:rgba(255,255,255"], body.light section [style*="color:rgba(255,255,255"], body.light section [style*="color:rgba(255,255,255"]{color:#64748b !important}
/* Hero description paragraph */ body.light .np-hero p[style*="rgba(255,255,255"]{color:#475569 !important}
/* Stat card labels */ body.light .np-stat-card [style*="rgba(255,255,255"]{color:#64748b !important}
/* Feature/pricing card borders — dark borders invisible on light */ body.light section [style*="border:1px solid rgba(255,255,255"]{border-color:rgba(0,0,0,0.08) !important}
body.light section [style*="border-bottom:1px solid rgba(255,255,255"]{border-bottom-color:rgba(0,0,0,0.06) !important}
/* Feature/pricing card backgrounds — too transparent on light */ body.light section [style*="background:rgba(255,255,255,0.02"], body.light section [style*="background:rgba(255,255,255,0.03"], body.light section [style*="background:rgba(255,255,255,0.06"]{background:rgba(0,0,0,0.02) !important}
/* Hero secondary button — white text/border invisible */ body.light .np-hero-btn-secondary, body.light a[style*="background:rgba(255,255,255,0.06"]{background:rgba(0,0,0,0.04) !important;border-color:rgba(0,0,0,0.12) !important;color:#1e293b !important}
/* FAQ chevron icons */ body.light .np-faq-item i[style*="rgba(255,255,255"]{color:#94a3b8 !important}
/* FAQ answer text */ body.light .np-faq-item [style*="display:none"]{color:#64748b !important}
/* Platform card text */ body.light section [style*="color:rgba(255,255,255,0.7"]{color:#475569 !important}
/* CTA section text */ body.light section [style*="color:rgba(255,255,255,0.5"]{color:#64748b !important}
/* Pricing list items */ body.light section li[style*="color:rgba(255,255,255,0.6"]{color:#475569 !important}
/* Trust badges */ body.light section [style*="color:rgba(255,255,255,0.45"]{color:#94a3b8 !important}
/* Gradient orb backgrounds — tone down in light mode */ body.light .np-hero [style*="radial-gradient"]{opacity:0.5}
/* ═══════════════════════════════════════════ 🔐 AUTH PAGES LIGHT MODE (register, login, forgot, profile) ═══════════════════════════════════════════ */ /* Card background — ensure white & readable */ body.light .card.text-black, body.light .card{background:#fff !important;color:#1e293b !important}
body.light .card .text-center.h1, body.light .card h1, body.light .card h2, body.light .card h3, body.light .card h4, body.light .card p{color:#1e293b !important}
/* Form icons in auth pages — must be visible */ body.light .card .fas, body.light .card .far, body.light .card .fab, body.light .card i.fa-user, body.light .card i.fa-phone, body.light .card i.fa-envelope, body.light .card i.fa-lock, body.light .card i.fa-key{color:#64748b !important}
/* Form labels */ body.light .card .form-label, body.light .card label{color:#475569 !important}
/* Form controls in cards */ body.light .card .form-control{background:#f8fafc !important;color:#1e293b !important;border:1.5px solid #e2e8f0 !important}
body.light .card .form-control:focus{border-color:#a855f7 !important;background:#fff !important;box-shadow:0 0 0 3px rgba(168,85,247,0.1) !important}
/* Links in auth pages */ body.light .card a.link-danger{color:#a855f7 !important}
body.light .card .fw-bold{color:#475569 !important}
/* Card body padding & text */ body.light .card-body{color:#1e293b !important}
/* Any text- helpers inside cards */ body.light .card .text-muted{color:#94a3b8 !important}
body.light .card .text-white{color:#1e293b !important}
/* Social login buttons */ body.light .card .btn-outline-primary, body.light .card .btn-outline-danger{color:#475569 !important;border-color:#e2e8f0 !important}
body.light .card .btn-outline-primary:hover, body.light .card .btn-outline-danger:hover{color:#fff !important}
/* Profile page specific */ body.light .card .list-group-item{background:#fff !important;color:#1e293b !important;border-color:#e2e8f0 !important}
/* Checkbox & radio labels */ body.light .card .form-check-label{color:#475569 !important}
/* ═══════════════════════════════════════════ 🔒 CONTENT AREA — Force dark text on white bg Content area is ALWAYS white regardless of theme ═══════════════════════════════════════════ */ .content-page{color:#1e293b !important}
.content-page h1, .content-page h2, .content-page h3, .content-page h4, .content-page h5{color:#1e293b !important}
.content-page p{color:#475569 !important}
.content-page label, .content-page .form-label{color:#475569 !important}
.content-page .form-control{color:#1e293b !important;background:#fff !important;border-color:#e2e8f0 !important}
.content-page .form-control:focus{border-color:#a855f7 !important;box-shadow:0 0 0 3px rgba(168,85,247,0.1) !important}
.content-page a:not(.btn):not([class*="btn-"]){color:#6366f1}
.content-page .text-muted{color:#94a3b8 !important}
.content-page .card{background:#fff !important;color:#1e293b !important}
.content-page .table th, .content-page .table td{color:#1e293b !important}
/* ═══════════════════════════════════════════ 🏠 LANDING PAGE ONLY — Force dark text on white bg Only targets .home-landing, does NOT affect services list ═══════════════════════════════════════════ */ .home-landing{color:#1e293b !important}
.home-landing h1, .home-landing h2, .home-landing h3, .home-landing h4, .home-landing h5{color:#1e293b !important}
.home-landing p{color:#475569 !important}
.home-landing span{color:#334155 !important}
.home-landing a:not(.btn):not([class*="btn-"]){color:#6366f1 !important}
/* Dark mode — same rules, higher specificity */ .dark .home-landing, body.dark .home-landing{color:#1e293b !important}
.dark .home-landing h1, .dark .home-landing h2, .dark .home-landing h3, .dark .home-landing h4, .dark .home-landing h5, body.dark .home-landing h1, body.dark .home-landing h2, body.dark .home-landing h3, body.dark .home-landing h4, body.dark .home-landing h5{color:#1e293b !important}
.dark .home-landing p, body.dark .home-landing p{color:#475569 !important}
.dark .home-landing span, body.dark .home-landing span{color:#334155 !important}
/* Preserve gradient text */ .home-landing span[style*="background-clip"], .dark .home-landing span[style*="background-clip"]{color:transparent !important;-webkit-text-fill-color:transparent !important}
/* Preserve colored badges/pills */ .home-landing .badge, .dark .home-landing .badge{color:inherit !important}
/* Navbar notification dropdown — always dark bg with light text */ .dark .iq-sub-dropdown, body.dark .iq-sub-dropdown{background:#1e1e3a !important;border-color:rgba(168,85,247,0.15) !important}
.dark .iq-sub-dropdown *, body.dark .iq-sub-dropdown *{color:#e0e7ff !important}