@charset "UTF-8";
/*!
* Style.css - Updated: January 2025
* Modern CSS with optimizations
* Removed duplicate code and SCSS syntax
* iOS 26 Design System Integration - Latest Apple Design Language
*/

/* Chrome-Optimized iOS 26 Design System Variables */
:root {
/* Chrome Performance Variables */
--chrome-acceleration: translateZ(0);
--chrome-backface: hidden;
--chrome-will-change: transform;

/* iOS 26 Advanced Color System */
--ios-primary: #0A84FF;
--ios-secondary: #5E5CE6;
--ios-tertiary: #007AFF;
--ios-success: #30D158;
--ios-warning: #FF9F0A;
--ios-danger: #FF453A;
--ios-purple: #BF5AF2;
--ios-pink: #FF2D92;
--ios-teal: #40C8E0;
--ios-indigo: #5856D6;
--ios-mint: #00C7BE;
--ios-cyan: #64D2FF;
--ios-background: #000000;
--ios-surface: #1C1C1E;
--ios-surface-secondary: #2C2C2E;
--ios-surface-tertiary: #3A3A3C;
--ios-surface-quaternary: #48484A;
--ios-separator: rgba(255, 255, 255, 0.08);
--ios-separator-opaque: #38383A;
--ios-label: #FFFFFF;
--ios-label-secondary: rgba(255, 255, 255, 0.6);
--ios-label-tertiary: rgba(255, 255, 255, 0.3);
--ios-label-quaternary: rgba(255, 255, 255, 0.18);

/* iOS 26 Advanced Blur Effects */
--ios-blur-ultra-thin: blur(8px);
--ios-blur-thin: blur(16px);
--ios-blur-regular: blur(24px);
--ios-blur-thick: blur(40px);
--ios-blur-ultra-thick: blur(64px);
--ios-blur-extreme: blur(120px);

/* iOS 26 Enhanced Shadows with Depth */
--ios-shadow-xs: 0 0.5px 1px rgba(0, 0, 0, 0.1);
--ios-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.06);
--ios-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
--ios-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
--ios-shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.12);
--ios-shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.2), 0 12px 24px rgba(0, 0, 0, 0.15);
--ios-shadow-3xl: 0 32px 64px rgba(0, 0, 0, 0.25), 0 16px 32px rgba(0, 0, 0, 0.18);

/* iOS 26 Adaptive Border Radius */
--ios-radius-xs: 4px;
--ios-radius-sm: 8px;
--ios-radius-md: 12px;
--ios-radius-lg: 16px;
--ios-radius-xl: 20px;
--ios-radius-2xl: 24px;
--ios-radius-3xl: 32px;
--ios-radius-full: 9999px;

/* iOS 26 Fluid Transitions */
--ios-transition-micro: 100ms cubic-bezier(0.4, 0, 0.2, 1);
--ios-transition-fast: 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ios-transition-base: 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ios-transition-slow: 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ios-transition-slower: 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ios-transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ios-transition-elastic: 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
--ios-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* iOS 26 Fluid Spacing System */
--ios-spacing-0: 0px;
--ios-spacing-px: 1px;
--ios-spacing-0-5: 2px;
--ios-spacing-1: 4px;
--ios-spacing-1-5: 6px;
--ios-spacing-2: 8px;
--ios-spacing-2-5: 10px;
--ios-spacing-3: 12px;
--ios-spacing-3-5: 14px;
--ios-spacing-4: 16px;
--ios-spacing-5: 20px;
--ios-spacing-6: 24px;
--ios-spacing-7: 28px;
--ios-spacing-8: 32px;
--ios-spacing-9: 36px;
--ios-spacing-10: 40px;
--ios-spacing-11: 44px;
--ios-spacing-12: 48px;
--ios-spacing-14: 56px;
--ios-spacing-16: 64px;
--ios-spacing-20: 80px;
--ios-spacing-24: 96px;
--ios-spacing-28: 112px;
--ios-spacing-32: 128px;

/* iOS 26 Typography Scale */
--ios-text-xs: 12px;
--ios-text-sm: 14px;
--ios-text-base: 16px;
--ios-text-lg: 18px;
--ios-text-xl: 20px;
--ios-text-2xl: 24px;
--ios-text-3xl: 30px;
--ios-text-4xl: 36px;
--ios-text-5xl: 48px;
--ios-text-6xl: 60px;
--ios-text-7xl: 72px;
--ios-text-8xl: 96px;
--ios-text-9xl: 128px;
}

.dev-mode {
display: none !important;
opacity: 0 !important;
z-index: -3 !important;
transform: translate(-200%, -200%) scale(0);
}

@media (min-width: 992px) and (max-width: 1500px) {
html {
zoom: .8;
}

/* ป้องกัน white background เมื่อ zoom */
html, body {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
}

/* แสดง sidebar toggle เมื่อ zoom */
.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
display: flex !important;
z-index: 2147483647 !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
}

.p-color {
color: #ffffff !important;
}

.s-color {
color: #ffffff !important;
}

.i-color {
color: #ffffff !important;
}

.w-color {
color: #ffffff !important;
}

.d-color {
color: #ffffff !important;
}

.alert {
font-weight: 500;
border: none;
outline: none;
border-radius: 15px !important;
}
/* Font Face Declarations - Commented out due to CORS errors */
/*
@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Bold.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Medium.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-SemiBold.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-ExtraBold.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-ExtraBold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Regular.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Thin.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Light.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-ThicccAF.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-ThicccAF.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: "THICCCBOI Semi";
src: url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Black.woff2") format("woff2"),
url("https://cdn.smmspot.net/cloutsy/assets/font/THICCCBOI-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
*/

body,
html {
/* Using Inter from Google Fonts (loaded in layout.html) as replacement for THICCCBOI */
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
font-size: 16px;
color: #fff;
}

body {
background-color: #0a0a1a !important;
background: #0a0a1a !important;
width: 100%;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
/* Force visibility - prevent black screen */
opacity: 1 !important;
visibility: visible !important;
}

body.stop-body {
overflow: hidden;
}

.root .app-content {
padding-top: 86px;
}

@media (min-width: 992px) {
.root .app-content {
padding-top: 127px;
}
}

.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 15px;
}

/* ========== Mobile Optimizations: UI กว้างเต็มจอ ========== */
@media (max-width: 767px) {
/* Container และ Fluid Container - ใช้พื้นที่เต็ม */
.container,
.container-fluid {
padding-left: 5px !important;
padding-right: 5px !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}

/* Card - กว้างเต็มและมี padding น้อย */
.card {
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 12px !important;
}

.card-body {
padding: 15px 12px !important;
}

/* Row และ Col - ใช้พื้นที่เต็ม */
.row {
margin-left: -5px !important;
margin-right: -5px !important;
}

.row > * {
padding-left: 5px !important;
padding-right: 5px !important;
}

/* Form elements - กว้างเต็มและสูงเพียงพอ */
.form-control,
.form-select,
.btn {
width: 100% !important;
font-size: 16px !important; /* ป้องกัน zoom */
}

/* Labels และ Text - ชัดเจน */
.form-label,
label {
font-size: 14px !important;
margin-bottom: 8px !important;
}

/* Buttons - กว้างเต็มและสูงเพียงพอสำหรับสัมผัส */
.btn {
min-height: 48px !important;
padding: 12px 16px !important;
font-size: 16px !important;
}

/* Spacing - ระยะห่างพอดี */
.mb-4 {
margin-bottom: 1rem !important;
}

/* List และ Grid - พอดี */
.nwoCard-row .col {
padding: 0 4px !important;
}

.nwoCard {
margin-bottom: 8px !important;
}
}

.app-content {
min-height: 100vh;
}

/* Mobile: ทำให้ content area กว้างขึ้น */
@media (max-width: 767px) {
.app-content {
padding-left: 5px !important;
padding-right: 5px !important;
}

.dashboard-root .app-content {
padding-left: 5px !important;
padding-right: 5px !important;
}
}

.btn {
border: none;
color: #fff;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #ffffff;
padding: 14px 20px;
}

.btn.btn-block {
width: 100%;
display: block;
}

.btn.btn-sm {
padding: 12px 16px;
border-radius: 8px !important;
}

@media (min-width: 992px) {
.btn.btn-sm {
padding: 16px 20px;
border-radius: 12px !important;
}
}

@media (min-width: 992px) {
.btn {
padding: 22px 25px;
}
}

.btn:hover {
color: #fff;
}

.btn.btn-primary {
background: linear-gradient(135deg, #c31431 0%, #d37518 100%);
box-shadow: 0 8px 16px rgba(195, 20, 49, 0.3), 0 2px 4px rgba(195, 20, 49, 0.2);
border-radius: var(--ios-radius-full);
color: #fff;
position: relative;
overflow: hidden;
transition: all var(--ios-transition-base);
transform: translateY(0);
/* Chrome Optimizations */
-webkit-transform: translateY(0) var(--chrome-acceleration);
will-change: var(--chrome-will-change);
backface-visibility: var(--chrome-backface);
-webkit-backface-visibility: var(--chrome-backface);
}

.btn.btn-primary::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}

.btn.btn-primary:hover {
background: linear-gradient(135deg, #d37518 0%, #e8923f 100%);
box-shadow: 0 12px 24px rgba(195, 20, 49, 0.4), 0 4px 8px rgba(195, 20, 49, 0.3);
transform: translateY(-2px);
}

.btn.btn-primary:hover::before {
left: 100%;
}

.btn.btn-primary:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 4px 8px rgba(195, 20, 49, 0.3);
}

.btn.btn-primary.btn-border {
background: #c31431;
border: 1px solid #f2ac68;
box-shadow: none;
color: #ffffff;
}

.btn.btn-primary.btn-border:hover {
color: #fff;
background: #e5790e;
}

.btn.btn-primary:focus,
.btn.btn-primary:active {
box-shadow: 0 0 0 0.25rem rgb(64 203 179 / 0%);
}

.btn.btn-secondary {
background: #2e333d;

border-radius: 100px;
color: #fff;
}

.btn.btn-secondary:hover {
background: #c31431;
}

.bs-single-thumbnail .blog-single-image-wrapper {
position: relative;
padding-top: 34%;
width: 100%;
border-radius: 50%;
user-select: none;
pointer-events: none;
border-radius: 25px;
overflow: hidden;
}
.btn.btn-secondary.btn-border {
background: #c31431;
border: 1px solid #f09f4e;
box-shadow: none;
color: #ffffff;
}

.btn.btn-secondary.btn-border:hover {
background: #d37416;
color: #fff;
}

.btn.btn-secondary:focus,
.btn.btn-secondary:active {
box-shadow: 0 0 0 0.25rem rgb(255 90 165 / 0%);
}

.btn.btn-info {
background: #5AD7FF;
box-shadow: 0px 24px 40px rgba(64, 203, 179, 0.1);
border-radius: 15px;
color: #fff;
}

.btn.btn-info:hover {
background: #48bde4;
}

.btn.btn-info.btn-border {
background: #c31431;
border: 1px solid #c31431;
box-shadow: none;
color: #ffffff;
}

.btn.btn-info.btn-border:hover {
background: #bd6814;
color: #fff;
}

.btn.btn-info:focus,
.btn.btn-info:active {
box-shadow: 0 0 0 0.25rem rgba(90, 215, 255, 0.25);
}

.btn .icon {
display: inline-flex;
align-items: center;
justify-content: center;
}

a {
color: #2dfad5;
text-decoration: none;
position: relative;
transition: all var(--ios-transition-base);
}

a:hover {
color: #1bd6b4;
}

a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--ios-primary);
transition: width var(--ios-transition-base);
}

a:hover::after {
width: 100%;
}

.card {
background: rgba(30, 32, 40, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ios-radius-lg);
box-shadow: var(--ios-shadow-md);
transition: all var(--ios-transition-base);
position: relative;
overflow: hidden;
/* Chrome Optimizations */
transform: var(--chrome-acceleration);
-webkit-transform: var(--chrome-acceleration);
will-change: var(--chrome-will-change);
backface-visibility: var(--chrome-backface);
-webkit-backface-visibility: var(--chrome-backface);
}

.card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
opacity: 0;
transition: opacity var(--ios-transition-base);
}

.card:hover {
transform: translateY(-2px);
box-shadow: var(--ios-shadow-lg);
border-color: rgba(255, 255, 255, 0.15);
}

.card:hover::before {
opacity: 1;
}

.card .card-title {
font-weight: 600;
font-size: 19px;
line-height: 22px;
margin-bottom: 0;
}

.card .card-head-text {
padding-top: 4px;
font-size: 16px;
line-height: 22px;
color: #72879d;
margin-bottom: 0px;
}

.card .card-header {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
background: #1e2127;
padding: 39px;
}

.card-border {
border: 1px solid rgba(255, 255, 255, 0.08) !important;
background: linear-gradient(135deg, #1e2127 0%, #16171f 100%) !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.divider {
border-bottom: 1px solid #373e4b;
clear: both;
}

.fw-400 {
font-weight: 400;
}

.fw-500 {
font-weight: 500;
}

.fw-600 {
font-weight: 600;
}

.fw-700 {
font-weight: 700;
}

/* ยกเว้น .charge-input เพื่อไม่ให้ขัดแย้งกับการแสดงผลราคา */
.form-control:not(.charge-input),
.form-select:not(.charge-input) {
background: #272b33;
border: 1px solid #3d444f;
box-sizing: border-box;
border-radius: 15px;
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #ffffff;
padding: 20px 25px;
position: relative;
z-index: 1;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important; /* เปลี่ยน transition ให้เร็วขึ้น */
}

/* Mobile: แก้ไข dropdown ให้กว้างและไม่เด้งออก */
@media (max-width: 767px) {
.form-select {
font-size: 16px !important; /* ป้องกัน zoom ใน iOS */
padding: 18px 20px !important;
width: 100% !important;
-webkit-appearance: none !important;
appearance: none !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
user-select: none !important;
cursor: pointer !important;
position: relative !important;
z-index: 10 !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important; /* ลด transition ให้เร็วขึ้น */
}

.form-select:focus {
z-index: 9999 !important;
position: relative !important;
/* ลบ transform ที่ทำให้เกิด bounce */
transform: none !important;
-webkit-transform: none !important;
}

/* Dropdown สำหรับหมวดหมู่และบริการ */
#orderform-category,
#orderform-service {
font-size: 16px !important;
min-height: 56px !important;
width: 100% !important;
display: block !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important; /* ลด transition */
}

/* ป้องกันไม่ให้ถูก cut off */
.mb-4:has(.form-select) {
position: relative !important;
z-index: 5 !important;
overflow: visible !important;
}

.card-body {
overflow: visible !important;
}
}

.form-control:not(.charge-input):read-only {
background: #3f4b62;
border: 1px solid #3d424c;
}

.form-control:not(.charge-input):focus,
.form-select:not(.charge-input):focus {
outline: none !important;
border-color: #4caf50 !important;
background-color: #292e36;
color: #fff;
/* ลบ transform ที่ทำให้เกิด bounce */
transform: none !important;
-webkit-transform: none !important;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25) !important; /* ลด box-shadow ให้เบาลง */
transition: border-color 0.15s ease, box-shadow 0.15s ease !important; /* transition เร็วขึ้น */
}

.form-control:not(.charge-input):disabled,
.form-select:not(.charge-input):disabled {
background: #292d34;
cursor: not-allowed;
}

.form-select {
position: relative;
}

.form-select::after {
content: "";
position: absolute;
display: block;
color: #fff;
width: 100px;
height: 100px;
}

.header {
position: fixed;
top: 0px;
background-color: transparent;
width: 100%;
border-bottom: 1px solid rgb(192 201 216 / 0%);
z-index: 1030;
transition: 0.14s ease;
}

.header.fixed {
background-color: #202127;
}

@media (min-width: 992px) {
.header.fixed {
background-color: rgb(30 33 39 / 65%) !important;
backdrop-filter: blur(30px);
}

.header.fixed .nmenu .nmenu-item .nmenu-link {
padding: 20px 20px;
}
}

.b-menu-wrapper {
display: block;
position: fixed;
bottom: -1px;
left: -1px;
width: calc(100% + 2px);
background: #252c3b;
/* border: 1px solid #ffffff0f; */
border-radius: 30px 30px 0 0;
padding: 24px 10px;
max-height: calc(100vh - 90px);
overflow-y: scroll;
transition: 0.14s ease;
transform: translateY(101%);
opacity: 0.4;
}

.b-menu-wrapper.active {
transform: translateY(0);
opacity: 1;
}

@media (min-width: 992px) {
.b-menu-wrapper {
display: block;
bottom: inherit;
background-color: transparent;
position: relative;
border-radius: 0;
padding: 0px;
padding-top: 10px;margin-bottom: 10px;width: 100%;
transform: none;
overflow: inherit;
opacity: 1 !important;
}
}

.nwoCard {
position: relative;
border-radius: 15px;
border: none;
border-color: transparent;
overflow: hidden;
margin-bottom: 30px;
}

@media (min-width: 992px) {
.nwoCard {
margin-bottom: 0;
}
}

.nwoCard::before {
content: "";
width: 125px;
height: 120px;
border-radius: 50%;
background: linear-gradient(25.76deg, #ffffff -140.08%, rgba(255, 255, 255, 0) 99.32%);
position: absolute;
left: -20px;
bottom: -70px;
}

.nwoCard::after {
content: "";
width: 250px;
height: 240px;
border-radius: 50%;
background: linear-gradient(209.57deg, #ffffff -64.88%, rgba(255, 255, 255, 0) 98.69%);
position: absolute;
right: -120px;
top: -170px;
}

.nwoCard .card-body {
position: relative;
z-index: 30;
display: flex;
align-items: center;
gap: 30px;
padding: 20px;
}

@media (min-width: 768px) {
.nwoCard .card-body {
padding: 30px;
}
}

.nwoCard .icon {
background: rgba(255, 255, 255, 0.25);
width: 66px;
height: 66px;
border-radius: 50%;
color: #fff;
display: none;
align-items: center;
justify-content: center;
font-size: 35px;
}

@media (min-width: 768px) {
.nwoCard .icon {
display: flex;
}
}

.nwoCard .title {
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #ffffff;
}

.nwoCard .value {
font-weight: 600;
font-size: 25px;
line-height: 29px;
color: #ffffff;
margin-bottom: 0;
}

.nwoCard-row .col:nth-child(1) .nwoCard {
background: #007eff;
}

.nwoCard-row .col:nth-child(2) .nwoCard {
background: linear-gradient(180deg, #ff6853 0%, #ff6b00 100%), #f65619;
}

.nwoCard-row .col:nth-child(3) .nwoCard {
background: linear-gradient(180deg, #90df75 0%, #62b655 100%), #00b67a;
}

.nwoCard-row .col:nth-child(4) .nwoCard {
background: linear-gradient(180deg, #ff7f7e 0%, #fe1f1e 100%), #ff5655;
}

.nwoCtFlt {
background: #ffffff;
border: 1px solid #ebf2fa;
box-sizing: border-box;
border-radius: 15px;
display: flex;
width: 100%;
outline: none;
align-items: center;
padding: 10px;
gap: 20px;
margin-bottom: 14px;
cursor: pointer;
transition: 0.14s ease;
}

.nwoCtFlt .icon {
background: #0083ff;
border-radius: 50%;
width: 46px;
color: #fff;
height: 46px;
align-items: center;
justify-content: center;
display: flex;
font-size: 30px;
}

.nwoCtFlt .title {
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #0c2447;
}

.nwoCtFlt:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 131, 255, 0.2);
}

.nwoCtFlt.active {
background-color: #e8f3ff;
}

.nwoNav {
background: #ffffff;
border-radius: 30px;
margin: 0;
list-style: none;
padding: 7px 8px;
display: flex;
}

.nwoNav .nwoNavLink {
border: none;
outline: none;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
line-height: 16px;
background-color: transparent;
color: #393d46;
padding: 11px 25px;
transition: 0.14s ease;
}

.nwoNav .nwoNavLink.active {
background: #0083ff;
color: #ffffff;
}

.nwoTabs .nwoTab {
display: none;
}

.nwoTabs .nwoTab.active {
display: block;
}

.nwoDeIt {
height: 47px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 20px;
background: #f7fafc;
border-radius: 15px;
}

.nwoDeIt.description {
height: auto;
padding: 20px;
}

.nwoDeIt.description .text {
color: #0c2447;
}

@media (min-width: 992px) {
.nwoDeIt.description {
padding: 30px;
}
}

.nwoDeIt .icon {
width: 32px;
height: 32px;
color: #fff;
background-color: #393d46;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.nwoDeIt .text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #393d46;
overflow-wrap: break-word;
max-width: 100%;
}
.sm-header {
display: block;
padding: 14px 0;
transition: 0.14s ease;
}

@media (min-width: 992px) {
.sm-header {
display: none;
}
}

.menu-btn {
height: 48px;
width: 48px;
border-radius: 10px;
background-color: #c31431;
color: #ffffff;
outline: none;
border: none;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
}

.b-menu-close {
height: 48px;
width: 48px;
border-radius: 24px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
outline: none;
border: none;
font-size: 20px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 20px;
z-index: 2000;
}

@media (min-width: 992px) {
.b-menu-close {
display: none;
}
}

.head-right-btns {
width: 100%;
display: block;
margin-bottom: 20px;
}

@media (min-width: 992px) {
.head-right-btns {
display: inline;
}
}

.nmenu {
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
gap: 10px;
padding: 10px 0 20px 0;
}

@media (min-width: 992px) {
.nmenu {
display: inline-flex;
align-items: center;
flex-direction: row;
padding: 10px 0 0 0;
}
}

.nmenu .nmenu-item {
position: relative;
display: flex;
justify-content: flex-start;
}

.nmenu .nmenu-item .nmenu-link {
font-weight: 600;
font-size: 23px;
line-height: 125%;
color: #ffffff;
opacity: 0.5;
padding: 7px 20px;
transition: 0.14s ease;
text-decoration: none;
display: inline-block;
text-align: left;
}

@media (min-width: 992px) {
.nmenu .nmenu-item .nmenu-link {
padding: 48px 20px;
display: block;
font-size: 16px;
}

.nmenu .nmenu-item .nmenu-link::before {
display: block;
background-color: #c31431 !important;
}
}

.nmenu .nmenu-item .nmenu-link::before {
content: "";
position: absolute;
bottom: 0px;
left: 10px;
box-shadow: 0px 0px 40px #c31431e6;right: 10px;
border-radius: 10px 10px 0px 0px;height: 7px;
opacity: 0;
background-color: transparent;
}

.nmenu .nmenu-item .nmenu-link:hover {
opacity: 0.7;
}

.nmenu .nmenu-item .nmenu-link.active {
opacity: 1;
}

.nmenu .nmenu-item .nmenu-link.active::before {
opacity: 1;
}

.home-head {
margin-top: -86px;
padding-top: 86px;
position: relative;
}

@media (min-width: 992px) {
.home-head {
margin-top: -127px;
padding-top: 127px;
}
}

.home-head .hh-bg {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: auto;
display: inline-block;
z-index: -1;
}

.home-head .hh-bg img {
width: 100%;
height: auto;
}

.home-head .home-head-content {
position: relative;
z-index: 5;
padding: 60px 0;
}

@media (min-width: 992px) {
.home-head .home-head-content {
padding: 120px 0;
}
}

.hh-box-title {
background: #1e2127;
border: 1px solid #32363f;
box-sizing: border-box;
backdrop-filter: blur(16px);
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 14px;
padding: 13px 20px;
color: #fff;
margin-bottom: 34px;
}

.hh-box-title .text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #ffffff;
}

@media (min-width: 768px) {
.hh-box-title {
padding: 10px 10px;
}
}

.hh-title {
font-weight: bold;
font-size: 30px;
line-height: 38px;
letter-spacing: -0.03em;
color: #ffffff;
margin-bottom: 40px;
}

@media (min-width: 992px) {
.hh-title {
font-size: 45px;
line-height: 50px;
}
}

.hh-title span {
position: relative;
color: #c31431;
}

.hh-title span::before {
content: '';
position: absolute;
right: 0px;
background: none no-repeat;
top: 100%;
height: 40px;
width: 90%;
}

.hh-text {
font-size: 14px;
line-height: 25px;
color: #797d89;
margin-bottom: 40px;
}

.hh-image-cover {
position: relative;
}

.hh-image-cover img {
max-width: 100%;
}

.home-login {
position: relative;
z-index: 10;
}

@media (min-width: 992px) {
.home-login {
margin-top: -320px;
}
}

.hl-title {
display: flex;
align-items: center;
gap: 20px;
}

.hl-title .icon {
border: 1px solid #3a4259;
color: #fff;
background-color: #1e2127;width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.hl-title .text {
font-style: normal;
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #ffffff;
}

.dhacc {
font-weight: 600;
font-size: 16px;
line-height: 18px;
text-align: right;
color: #ffffff;
}

.home-input {
background: #272a31;
border-radius: 15px;
font-size: 14px;
line-height: 17px;
color: #c31431;
display: flex;
align-items: center;
height: 56px;
overflow: hidden;
}

@media (min-width: 768px) {
.home-input {
height: 62px;
}
}

@media (min-width: 992px) {
.home-input {
height: 76px;
}
}

.home-input:focus-within {
box-shadow: 0 0 0 0.25rem rgb(45 250 213 / 0%);
}

.home-input .icon {
width: 76px;
height: 76px;
display: flex;
align-items: center;
justify-content: center;
font-size: 29px;
}

.home-input input,
.home-input select {
font-weight: 600;
color: #929cb7;
border: none;
outline: none;
background-color: transparent;
height: 76px;
flex: 1;
color: #fff !important;
}

.home-input input::placeholder,
.home-input select::placeholder {
color: #929cb7;
}

.home-input input:focus,
.home-input select:focus {
color: #fff;
}

.home-input input:-webkit-autofill,
.home-input input:-webkit-autofill:hover,
.home-input input:-webkit-autofill:focus,
.home-input input:-webkit-autofill:active {
-webkit-text-fill-color: #fff;
transition: background-color 5000s ease-in-out 0s;
}

.hl-btn {
width: 56px;
height: 56px;
background: #272931 !important;
border: 1px solid #33353f !important;
box-sizing: border-box;
border-radius: 15px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: none;
font-weight: 400;
font-size: 24px;
}

@media (min-width: 768px) {
.hl-btn {
height: 62px;
width: 62px;
}
}

@media (min-width: 992px) {
.hl-btn {
height: 76px;
width: 76px;
}
}

.hl-btn-wrapper input[type=checkbox] {
display: none;
}

.hl-btn-wrapper input[type=checkbox]:checked+.hl-btn {
background-color: #40cbb3 !important;
}

.lg-btn {
padding: 18px 10px;
}

@media (min-width: 768px) {
.lg-btn {
padding: 22px 10px;
}
}

@media (min-width: 992px) {
.lg-btn {
padding: 29px 10px;
}
}

.home-platforms {
padding: 70px 0;
}

.hpla-wrapper {
display: flex;
overflow-x: auto;
gap: 20px;
align-items: center;
justify-content: space-between;
}

.hpla-wrapper::-webkit-scrollbar {
display: none;
}

.hpla-wrapper .hpla-item {
transition: 0.14s ease;
}

.hpla-wrapper .hpla-item:hover {
filter: grayscale(0) invert(1);
}

.home-diff-sec {
padding: 80px 0;
}

.htbox {
position: relative;
width: 40px;
height: 40px;
background: #c31431;
border-radius: 100px;
color: #ffffff;
font-size: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 26px;
}

.home-title h2 {
font-weight: bold;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
}

.home-title h2 span {
color: #c31431;
position: relative;
}

.home-title h2 span::before {
content: '';
position: absolute;
right: 0;
background-image: none;
background-repeat: no-repeat;
background-position: right top;
top: 100%;
height: 40px;
width: 100%;
}

.home-title.c-2 h2 span::before {
background-image: none;
}

.home-title.c-3 h2 span::before {
background-image: none;
}
.home-title.c-2 .htbox {
background-color: #c31431;
color: #ffffff;
}

.home-title.c-2 h2 span {
color: #c31431;
}

.home-title.c-3 .htbox {
background-color: rgba(90, 215, 255, 0.5);
color: #5AD7FF;
}

.home-title.c-3 h2 span {
color: #c31431;
}

.home-text {
font-size: 17px;
line-height: 34px;
color: #797d89;
display: inline-block;
max-width: 800px;
}

.diff-card {
position: relative;
padding: 20px 0;
margin-bottom: -1px;
}

.diff-card::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #c31431;
height: 0px;
transition: 0.14s ease;
}

.diff-card:hover::after {
height: 3px;
}

@media (min-width: 992px) {
.diff-card {
padding: 20px 0 60px;
}
}

.diff-card .diff-card--icon {

width: 82px;
height: 82px;
border-radius: 500px;display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 24px;
color: #fff;
}

.diff-card .diff-card--icon.icon-1 {
background: #c31431;
}

.diff-card .diff-card--icon.icon-2 {
background: #343641;
}

.diff-card .diff-card--icon.icon-3 {
background: #c31431;
}

.diff-card .diff-card--icon.icon-4 {
background: #343641;
}

.diff-card .diff-card--title {
font-size: 19px;
line-height: 22px;
letter-spacing: -0.04em;
color: #ffffff;
margin-bottom: 16px;
}

.diff-card .diff-card--text {
font-weight: 400;
font-size: 14px;
line-height: 17px;
letter-spacing: -0.04em;
color: #ffffff47;
max-width: 210px;
}

.diff-row {
border-bottom: 1px solid #ffffff21;
}

.home-section {
padding: 80px 0;
position: relative;
}

.hcoc-card {
background: #1e2127;
box-shadow: 0px 47px 100px rgba(0, 0, 0, 0.02);
border-radius: 10px;
border: 1px solid #2b2f38;position: relative;
overflow: hidden;
}

.hcoc-card::before {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 2;
background-repeat: no-repeat;
background-position: bottom center;
background-size: 95% auto;
}

.hcoc-card .hcoc-body {
position: relative;
z-index: 5;
padding: 30px 24px;
}

@media (min-width: 768px) {
.hcoc-card {
background-image: none;
border-radius: 15px;
border: 1px solid #3d4252;background-repeat: no-repeat;}

.hcoc-card .hcoc-body {
padding: 40px 28px;
}
}

@media (min-width: 992px) {
.hcoc-card .hcoc-body {
padding: 60px 50px 310px;
}
}

.hcoc-card .hcoc-user-info {
position: relative;
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 20px;
}

.hcoc-card .hcoc-user-info .hcoc-avatar {
width: 30px;
height: 30px;
}

.hcoc-card .hcoc-user-info .hcoc-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hcoc-card .hcoc-user-info .hcoc-name {
font-weight: 600;
font-size: 14px;
line-height: 17px;
letter-spacing: -0.04em;
color: #ffffff;
}

.hcoc-card .hcoc-text {
background: linear-gradient(89.31deg, rgba(255, 90, 165, 0.38) 4.55%, rgba(255, 255, 255, 0) 43.29%),
linear-gradient(0deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
}

.home-rise-section {
position: relative;
padding: 80px 0;
}

.home-rise-section .hrs-card {
background: #1e2127;
box-shadow: 0px 47px 100px rgba(0, 0, 0, 0.02);
border-radius: 15px;
padding: 20px;
border: 1px solid #252831;}

@media (min-width: 992px) {
.home-rise-section .hrs-card {
padding: 43px 40px;
}
}

.home-rise-section .hrs-steps {
display: flex;
flex-direction: column;
gap: 36px;
}

.home-rise-section .hrs-steps .item {
display: flex;
gap: 20px;
align-items: center;
}

.home-rise-section .hrs-steps .item .number .number-box {
display: flex;
align-items: center;
justify-content: center;
background: #343641;
border: 1px solid #495368;
box-sizing: border-box;
border-radius: 36px;
width: 72px;
height: 72px;
font-weight: 600;
font-size: 25px;
line-height: 31px;
letter-spacing: -0.04em;
}

.home-rise-section .hrs-steps .item .content h2 {
font-weight: 600;
font-size: 19px;
line-height: 23px;
letter-spacing: -0.04em;
color: #ffffff;
margin-bottom: 6px;
}

.home-rise-section .hrs-steps .item .content p {
font-size: 16px;
line-height: 19px;
letter-spacing: -0.04em;
color: #797d89;
margin: 0;
padding: 0;
}

.home-rise-section .rise-video {
display: block;
border: 1px solid #434d64;
box-sizing: border-box;
border-radius: 15px;
overflow: hidden;
background-color: #212735;
position: relative;
padding-top: 54.25%;
text-decoration: none;
}

.home-rise-section .rise-video iframe {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 30;
display: block;
}

@media (min-width: 992px) {
.home-rise-section .rise-video {
margin-left: 30px;
}
}

.home-rise-section .rise-video .video-thumbnail {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.5;
object-fit: cover;
}

.home-rise-section .rise-video .play-btn {
position: absolute;
z-index: 2;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background: rgba(21, 25, 34, 0.2);
border: 1px solid #444a5b;
box-sizing: border-box;
backdrop-filter: blur(10px);
width: 96px;
height: 96px;
border-radius: 50%;
color: #ffffff;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}

.card-hobo {
background-image: none;
background-position: bottom;
background-size: 100% auto;
background-repeat: no-repeat;
border-radius: 20px;
margin-bottom: 30px;
}

@media (min-width: 768px) {
.card-hobo {
border-radius: 15px;
}
}

@media (min-width: 992px) {
.card-hobo {
margin-bottom: 0;
}
}

.card-hobo .card-body {
padding: 24px 22px 32px;
}

@media (min-width: 768px) {
.card-hobo .card-body {
padding: 40px 36px 280px;
}
}

@media (min-width: 992px) {
.card-hobo .card-body {
padding: 50px 45px 350px;
}
}

.card-hobo .card-body .c-head {
display: flex;
align-items: center;
gap: 17px;
margin-bottom: 32px;
}

.card-hobo .card-body .c-head .icon {
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.04em;
border-radius: 100PX;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}

.card-hobo .card-body .c-head .title {
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.04em;
}

.card-hobo .card-body .c-text {
background-color: #fff;
color: #fff;
font-weight: 600;
font-size: 25px;
line-height: 29px;
letter-spacing: -0.04em;
}

@media (min-width: 768px) {
.card-hobo.card-1 {
background-image: none !important;
}
}
.card-hobo.card-1 .c-head .icon {
background-color: #c31431;
color: #ffffff;
}

.card-hobo.card-1 .c-head .title {
color: #ffffff;
}

.card-hobo.card-1 .c-text {
background: linear-gradient(89.31deg, rgb(255 138 22 / 39%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
.card-hobo.card-2 {
background-image: none;
}
}

.card-hobo.card-2 .c-head .icon {


background-color: #c31431;
color: #ffffff;}

.card-hobo.card-2 .c-head .title {
color: #ffffff;
}

.card-hobo.card-2 .c-text {
background: linear-gradient(89.31deg, rgb(255 138 22 / 39%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
.card-hobo.card-3 {
background-image: none;
}
}

.card-hobo.card-3 .c-head .icon {


background-color: #c31431;
color: #ffffff;}

.card-hobo.card-3 .c-head .title {
color: #ffffff;
}

.card-hobo.card-3 .c-text {
background: linear-gradient(89.31deg, rgb(255 138 22 / 39%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.our-ssto-box {
background: #252c3b;
box-shadow: 0px 47px 100px rgba(0, 0, 0, 0.02);
border-radius: 20px;
padding: 20px;
}

@media (min-width: 768px) {
.our-ssto-box {
padding: 40px 36px;
border-radius: 30px;
}
}

@media (min-width: 992px) {
.our-ssto-box {
padding: 80px 70px;
border-radius: 52px;
}
}

.testi-card {
margin-bottom: 40px;

background-size: cover;
background-position: center;
}

.testi-card .tc-top {
display: flex;
gap: 14px;
align-items: center;
margin-bottom: 8px;
}

.testi-card .tc-top>div {
padding: 8px 0;
}

.testi-card .tc-top .tc-avatar-img {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
}

.testi-card .tc-top .tc-name {
font-weight: 600;
font-size: 19px;
line-height: 22px;
letter-spacing: -0.04em;
color: #ffffff;
}

.testi-card .tc-top .tc-stars {
display: flex;
align-items: center;
gap: 6.45px;
color: #fbbc05;
}

.testi-card .tc-content {
border-bottom: 1px solid #40525e;
padding-bottom: 10px;
}

.testi-card .tc-content .tc-text {
font-weight: 600;
font-size: 14px;
line-height: 23px;
letter-spacing: -0.04em;
color: #797d89;
}

.tci-card {
background: url(https://cdn.smmspot.net/cloutsy/assets/img/home/tci.svg) #2c3445 no-repeat;
background-size: cover;
background-position: center;
border: 1px solid #3f4a63;
box-sizing: border-box;
border-radius: 35px;
padding: 30px;
position: relative;
margin-top: 30px;
}

@media (min-width: 768px) {
.tci-card {
padding: 40px 30px;
}
}

@media (min-width: 768px) {
.tci-card {
padding: 80px 64px;
}
}

.tci-card .tci-title {
font-weight: 600;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
background: linear-gradient(93.63deg, rgba(255, 90, 165, 0.38) 4.51%, rgba(255, 255, 255, 0) 37.32%),
linear-gradient(0deg, #ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.tci-card .btn {
font-size: 19px;
line-height: 23px;
letter-spacing: -0.04em;
color: #ffffff;
padding: 0;
margin-top: 36px;
}

.tci-card .btn span {
font-weight: 600;
}

.tci-card .tci-image {
position: absolute;
bottom: 0px;
right: 74px;
display: none;
}

@media (min-width: 768px) {
.tci-card .tci-image {
display: block;
right: 0;
width: 300px;
}
}

@media (min-width: 992px) {
.tci-card .tci-image {
right: 74px;
width: inherit;
}
}

.home-last {
padding: 100px 0;
position: relative;
width: 100%;
margin-bottom: 60px;
overflow: inherit;
}

.home-last .hlbg {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-52%);
}

.home-last .container {
position: relative;
z-index: 3;
}

.home-last .social-icons {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 160%;
z-index: 4;
}

.home-last .social-icons .social-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
background-color: #2dfad5;
color: #fff;
font-size: 20px;
}

.home-last .social-icons .social-icon.si-tw {
left: 10px;
top: 20px;
background: #c31431;
box-shadow: 0px 4px 50px #c31431;
}

.home-last .social-icons .social-icon.si-ig {
bottom: 20px;
right: 20px;
transform: scale(1.7);
background: #c31431;
box-shadow: 0px 4px 50px #c31431;
}

.home-last .social-icons .social-icon.si-fb {
top: 30px;
right: 0px;
transform: scale(1.5);
background: #c31431;
box-shadow: 0px 4px 50px #c31431;
}

.home-last .social-icons .social-icon.si-yt {
bottom: 30px;
left: -20px;
transform: scale(1.5);
background: #c31431;
}

.hbl-title {
text-align: center;
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}

.hbl-title .hblt-top {
display: inline-flex;
align-items: center;
gap: 18px;
}

.hbl-title .hblt-top .htbox {
background-color: #c31431;
color: #ffffff;
}

.hbl-title .hblt-top .text {
font-weight: 600;
font-size: 16px;
line-height: 20px;
letter-spacing: -0.04em;
color: #ffffff;
}

.hbl-title .title {
font-weight: 600;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
background: linear-gradient(89.31deg, rgb(255 138 22 / 23%) 4.55%, rgb(250 130 11 / 0%) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.footer {
position: relative;
z-index: 6;
background-image: none;
background-size: cover;
background-position: bottom;
}

.footer-top {
position: relative;
z-index: 10;
}

.footer-top .ft-content {
padding: 44px 0;
}

.f-divider {
height: 1px;
width: 100%;
background: rgba(192, 201, 216, 0.2);
display: block;
position: relative;
}

.footer-menu {
display: inline-flex;
align-items: center;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
}

.footer-menu .menu-link {
position: relative;
display: block;
padding: 6px 2px;
font-weight: 600;
font-size: 14px;
line-height: 125%;
color: #ffffff;
opacity: 0.5;
transition: 0.14s ease;
}

.footer-menu .menu-link:hover {
opacity: 0.8;
}

.footer-menu .menu-link.active {
opacity: 1;
}

.footer-bottom {
position: relative;
z-index: 10;
padding: 45px 0;
}

.footer-cp-text {
font-size: 16px;
line-height: 35px;
letter-spacing: -0.03em;
color: #737684;
}

.footer-cp-text a {
color: #fff;
}

.footer-alert {
display: inline-block;
background: rgb(30 33 39);
border: 1px solid #373c46;
box-sizing: border-box;
border-radius: 15px;
font-weight: 600;
font-size: 16px;
line-height: 16px;
/* identical to box height, or 100% */
letter-spacing: -0.03em;
color: #ffffff;
padding: 18px 20px;
}

.footer-l-alert {
background: #1e2127;
border: 1px solid #353b4f;
box-sizing: border-box;
border-radius: 15px;
padding: 18px 20px;
font-weight: 600;
font-size: 14px;
line-height: 30px;
text-align: center;
color: #fff;
}

.dashboard-root {
position: relative;
}

.dashboard-root .app-content {
padding: 120px 0 80px 0px;
max-width: 100%;
overflow-x: hidden;
}

@media (min-width: 768px) {
.dashboard-root .app-content {
padding: 120px 0 80px 0px;
}
}

@media (min-width: 1400px) {
.dashboard-root .app-content {
padding: 140px 50px 80px 280px;
max-width: calc(100% - 280px);
transition: padding 0.3s ease;
}

/* Improve card styling on desktop */
.dashboard-root .card {
border-radius: 16px;
background: linear-gradient(135deg, #1e2127 0%, #1a1d29 100%);
border: 1px solid #2a2d3a;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}

.dashboard-root .card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
transform: translateY(-2px);
}

.dashboard-root .card .card-header {
background: rgba(42, 45, 58, 0.5);
border-bottom: 1px solid #2a2d3a;
}

.dashboard-root .card .card-body {
background: transparent;
}
}

.dashboard-root .card .card-body {
padding: 33px;
}

/* Unified Sidebar Toggle / Hamburger Icon Styles - Smooth & Perfect */
/* ปุ่มนี้จะเห็นได้เสมอแม้เมื่อ zoom เข้า */
.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
position: fixed !important;
z-index: 2147483647 !important; /* สูงสุดที่เป็นไปได้ในระบบ */
bottom: 80px !important;
right: 15px !important;
top: auto !important; /* ลบ top: 22px ที่อาจทำให้ตำแหน่งผิด */
left: auto !important; /* ป้องกันการเขียนทับ */
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
border: 3px solid rgba(255, 255, 255, 0.3) !important;
background: linear-gradient(135deg, #ff4757 0%, #c31431 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 16px !important;
outline: none !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column !important;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
-webkit-tap-highlight-color: transparent !important;
touch-action: manipulation !important;
user-select: none !important;
-webkit-user-select: none !important;
-moz-user-select: none !important;
-ms-user-select: none !important;
box-shadow:
0 8px 24px rgba(255, 71, 87, 0.6),
0 4px 12px rgba(0, 0, 0, 0.4),
0 0 0 4px rgba(255, 71, 87, 0.2),
inset 0 2px 4px rgba(255, 255, 255, 0.1) !important;
transform: translateZ(0) scale(1) !important;
-webkit-transform: translateZ(0) scale(1) !important;
will-change: transform, background-color, box-shadow !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
filter: none !important;
-webkit-filter: none !important;
}

.sidebar-toggle:active,
.sidebar-toggle.ham-icon:active {
transform: scale(0.95) translateZ(0);
-webkit-transform: scale(0.95) translateZ(0);
}

.sidebar-toggle:hover,
.sidebar-toggle.ham-icon:hover {
background: rgba(239, 68, 68, 1);
transform: scale(1.05) translateZ(0);
-webkit-transform: scale(1.05) translateZ(0);
box-shadow:
0 6px 20px rgba(239, 68, 68, 0.5),
0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Hamburger Icon Bars - Using ::before, ::after, and span */
.sidebar-toggle.ham-icon::before,
.sidebar-toggle.ham-icon::after,
.sidebar-toggle.ham-icon span {
content: '';
display: block;
position: absolute;
width: 28px;
height: 3px;
background: #ffffff;
border-radius: 2px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
pointer-events: none;
}

.sidebar-toggle.ham-icon::before {
transform: translateY(-10px) translateZ(0);
-webkit-transform: translateY(-10px) translateZ(0);
}

.sidebar-toggle.ham-icon::after {
transform: translateY(10px) translateZ(0);
-webkit-transform: translateY(10px) translateZ(0);
}

.sidebar-toggle.ham-icon span {
opacity: 1;
transform: scaleX(1) translateZ(0);
-webkit-transform: scaleX(1) translateZ(0);
}

/* Active State - Transform to X */
.sidebar-toggle.ham-icon.active,
.sidebar-toggle.active {
background: rgba(239, 68, 68, 1);
transform: scale(1.08) translateZ(0);
-webkit-transform: scale(1.08) translateZ(0);
box-shadow:
0 8px 30px rgba(239, 68, 68, 0.6),
0 4px 15px rgba(0, 0, 0, 0.4);
}

.sidebar-toggle.ham-icon.active::before,
.sidebar-toggle.active::before {
transform: rotate(45deg) translateY(0) translateZ(0);
-webkit-transform: rotate(45deg) translateY(0) translateZ(0);
background: #ffffff;
}

.sidebar-toggle.ham-icon.active::after,
.sidebar-toggle.active::after {
transform: rotate(-45deg) translateY(0) translateZ(0);
-webkit-transform: rotate(-45deg) translateY(0) translateZ(0);
background: #ffffff;
}

.sidebar-toggle.ham-icon.active span,
.sidebar-toggle.active span {
opacity: 0;
transform: scaleX(0) translateZ(0);
-webkit-transform: scaleX(0) translateZ(0);
}

/* Active Hover State */
.sidebar-toggle.ham-icon.active:hover,
.sidebar-toggle.active:hover {
background: rgba(248, 113, 113, 1);
transform: scale(1.12) translateZ(0);
-webkit-transform: scale(1.12) translateZ(0);
box-shadow:
0 10px 40px rgba(248, 113, 113, 0.7),
0 6px 20px rgba(0, 0, 0, 0.4);
}

@media (min-width: 768px) {
.sidebar-toggle,
.sidebar-toggle.ham-icon {
left: 8px;
top: 24px;
bottom: auto;
right: auto;
width: 60px;
height: 60px;
}

.sidebar-toggle.ham-icon::before,
.sidebar-toggle.ham-icon::after,
.sidebar-toggle.ham-icon span {
width: 30px;
height: 3px;
}

.sidebar-toggle.ham-icon::before {
transform: translateY(-11px) translateZ(0);
-webkit-transform: translateY(-11px) translateZ(0);
}

.sidebar-toggle.ham-icon::after {
transform: translateY(11px) translateZ(0);
-webkit-transform: translateY(11px) translateZ(0);
}

.sidebar-toggle.active.ham-icon,
.sidebar-toggle.active {
transform: translateX(280px) scale(1.05) translateZ(0);
-webkit-transform: translateX(280px) scale(1.05) translateZ(0);
}
}

@media (min-width: 992px) {
.sidebar-toggle,
.sidebar-toggle.ham-icon {
left: 30px;
width: 64px;
height: 64px;
}

.sidebar-toggle.ham-icon::before,
.sidebar-toggle.ham-icon::after,
.sidebar-toggle.ham-icon span {
width: 32px;
height: 4px;
}

.sidebar-toggle.ham-icon::before {
transform: translateY(-12px) translateZ(0);
-webkit-transform: translateY(-12px) translateZ(0);
}

.sidebar-toggle.ham-icon::after {
transform: translateY(12px) translateZ(0);
-webkit-transform: translateY(12px) translateZ(0);
}
}

@media (min-width: 1400px) {
/* ซ่อน toggle button เฉพาะเมื่อหน้าจอกว้างจริงๆ และไม่ zoom */
.sidebar-toggle,
.sidebar-toggle.ham-icon {
display: none !important;
}

/* แต่ถ้า zoom เข้า ให้แสดง toggle button */
@media (max-device-width: 1400px) {
.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
display: flex !important;
}
}

/* Ensure sidebar is always visible on desktop (non-mobile) */
.sidebar {
width: 280px;
transform: translateX(0) translateZ(0) !important;
-webkit-transform: translateX(0) translateZ(0) !important;
z-index: 1040;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

/* แต่ถ้า sidebar ถูกปิดด้วย JavaScript ให้ซ่อน */
.sidebar:not(.active) {
transform: translateX(-100%) translateZ(0) !important;
-webkit-transform: translateX(-100%) translateZ(0) !important;
}

.sidebar.active {
transform: translateX(0) translateZ(0) !important;
-webkit-transform: translateX(0) translateZ(0) !important;
}

/* Prevent body scroll lock on desktop */
body.sidebar-open {
overflow: visible !important;
position: relative !important;
width: auto !important;
height: auto !important;
}
}

/* Smooth pulse animation for active hamburger icon */
@keyframes hamIconSmoothPulse {
0%, 100% {
box-shadow:
0 8px 30px rgba(239, 68, 68, 0.6),
0 4px 15px rgba(0, 0, 0, 0.4);
transform: scale(1.08) translateZ(0);
-webkit-transform: scale(1.08) translateZ(0);
}
50% {
box-shadow:
0 10px 40px rgba(248, 113, 113, 0.8),
0 6px 20px rgba(0, 0, 0, 0.5);
transform: scale(1.1) translateZ(0);
-webkit-transform: scale(1.1) translateZ(0);
}
}

/* Apply subtle pulse animation when active */
.sidebar-toggle.ham-icon.active,
.sidebar-toggle.active {
animation: hamIconSmoothPulse 2.5s ease-in-out infinite;
}

/* Mobile responsive improvements */
@media (max-width: 767px) {
.sidebar-toggle.ham-icon::before,
.sidebar-toggle.ham-icon::after,
.sidebar-toggle.ham-icon span {
width: 24px;
height: 3px;
}

.sidebar-toggle.ham-icon::before {
transform: translateY(-9px) translateZ(0);
-webkit-transform: translateY(-9px) translateZ(0);
}

.sidebar-toggle.ham-icon::after {
transform: translateY(9px) translateZ(0);
-webkit-transform: translateY(9px) translateZ(0);
}
}

.sidebar {
bottom: 0px;
width: 260px;
transform: translateX(-100%) translateZ(0) !important;
-webkit-transform: translateX(-100%) translateZ(0) !important;
background: linear-gradient(180deg, #1a1d29 0%, #161821 100%);
border-right: 1px solid #2a2d3a;
position: fixed !important;
left: 0px !important;
top: 0px !important;
height: 100vh !important;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-transform 0.4s cubic-bezier(0.25, 0.46, 0.45,
0.94) !important;
z-index: 99999 !important;
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
box-shadow: 2px 0 15px rgba(0, 0, 0, 0.4);
overflow-y: auto;
overflow-x: hidden;
}

.sidebar.active {
transform: translateX(0) translateZ(0) !important;
-webkit-transform: translateX(0) translateZ(0) !important;
}

@media (min-width: 1400px) {
/* ซ่อน toggle button เฉพาะเมื่อหน้าจอกว้างจริงๆ และไม่ zoom */
.sidebar-toggle,
.sidebar-toggle.ham-icon {
display: none !important;
}

/* แต่ถ้า zoom เข้า ให้แสดง toggle button */
@media (max-device-width: 1400px) {
.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
display: flex !important;
}
}

/* Ensure sidebar is always visible on desktop (non-mobile) */
.sidebar {
width: 280px;
transform: translateX(0) translateZ(0) !important;
-webkit-transform: translateX(0) translateZ(0) !important;
z-index: 1040;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
}

/* แต่ถ้า sidebar ถูกปิดด้วย JavaScript ให้ซ่อน */
.sidebar:not(.active) {
transform: translateX(-100%) translateZ(0) !important;
-webkit-transform: translateX(-100%) translateZ(0) !important;
}

.sidebar.active {
transform: translateX(0) translateZ(0) !important;
-webkit-transform: translateX(0) translateZ(0) !important;
}

/* Prevent body scroll lock on desktop */
body.sidebar-open {
overflow: visible !important;
position: relative !important;
width: auto !important;
height: auto !important;
}
}

/* Sidebar Overlay for Mobile */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 9998;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-tap-highlight-color: transparent;
touch-action: auto;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: opacity, visibility;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-webkit-touch-callout: none;
user-select: none;
}

.sidebar-overlay.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}

/* Prevent body scroll when sidebar is open */
body.sidebar-open {
overflow: hidden !important;
position: fixed !important;
width: 100% !important;
height: 100% !important;
touch-action: none !important;
-webkit-overflow-scrolling: none !important;
}

/* Mobile specific fixes */
@media (max-width: 767px) {
body.sidebar-open {
overflow: hidden !important;
position: fixed !important;
width: 100vw !important;
height: 100vh !important;
left: 0 !important;
top: 0 !important;
touch-action: none !important;
}

.sidebar-overlay.active {
pointer-events: auto !important;
cursor: pointer !important;
}

.sidebar.active {
transform: translateX(0) translateZ(0) !important;
-webkit-transform: translateX(0) translateZ(0) !important;
}

/* Fix dropdown z-index when sidebar is open - JavaScript handled */
body.sidebar-open #orderform-category,
body.sidebar-open #orderform-service {
z-index: 10001 !important;
position: relative !important;
}

body.sidebar-open #orderform-category:focus,
body.sidebar-open #orderform-service:focus {
z-index: 10002 !important;
}
}

@media (min-width: 1400px) {
.sidebar-overlay {
display: none !important;
}

/* Desktop sidebar enhancements */
.sidebar {
background: linear-gradient(180deg, #1a1d29 0%, #161821 100%);
border-right: 1px solid #2a2d3a;
box-shadow: 2px 0 20px rgba(0, 0, 0, 0.5);
}

/* Improve scrollbar visibility on desktop */
.sidebar-body::-webkit-scrollbar {
width: 6px;
}

.sidebar-body::-webkit-scrollbar-track {
background: rgba(26, 29, 41, 0.5);
}

.sidebar-body::-webkit-scrollbar-thumb {
background: rgba(195, 20, 49, 0.3);
border-radius: 3px;
}

.sidebar-body::-webkit-scrollbar-thumb:hover {
background: rgba(195, 20, 49, 0.5);
}
}

/* Sidebar Close Button - Visible and Clear */
.sidebar-close-btn {
position: absolute;
top: 20px;
right: 20px;
width: 44px;
height: 44px;
background: linear-gradient(135deg, #FF453A, #DC143C);
border: 2px solid rgba(255,255,255,0.2);
border-radius: 12px;
color: #ffffff;
font-size: 24px;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10001;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow:
0 4px 12px rgba(255, 69, 58, 0.4),
inset 0 1px 0 rgba(255,255,255,0.2);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
-webkit-touch-callout: none;
user-select: none;
pointer-events: auto;
transform: translateZ(0);
-webkit-transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.sidebar-close-btn:hover {
background: linear-gradient(135deg, #FF6B60, #FF453A);
transform: scale(1.05) translateZ(0);
box-shadow:
0 6px 20px rgba(255, 69, 58, 0.6),
inset 0 1px 0 rgba(255,255,255,0.3);
}

.sidebar-close-btn:active {
transform: scale(0.95) translateZ(0);
box-shadow:
0 2px 8px rgba(255, 69, 58, 0.4),
inset 0 1px 0 rgba(255,255,255,0.2);
}

.sidebar-close-btn i {
font-size: 20px;
line-height: 1;
pointer-events: none;
}

/* Hide close button on desktop */
@media (min-width: 1400px) {
.sidebar-close-btn {
display: none !important;
}
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
.sidebar-close-btn {
top: 15px;
right: 15px;
width: 52px !important;
height: 52px !important;
font-size: 28px;
min-width: 52px !important;
min-height: 52px !important;
}

.sidebar-close-btn i {
font-size: 24px;
}
}

.sidebar .sidebar-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: column !important;
}

.sidebar-logo {
padding: 24px 35px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(26, 29, 41, 0.8);
border-bottom: 1px solid #2a2d3a;
}

.sidebar-logo img {
max-width: 100%;
}

.sidebar-body {
flex: 1;
overflow-y: auto;
padding-bottom: 40px;
}

.sidebar-body::-webkit-scrollbar {
width: 0px;
}

/* Track */
.sidebar-body::-webkit-scrollbar-track {
background: #252c3b;
border-radius: 3px;
}

/* Handle */
.sidebar-body::-webkit-scrollbar-thumb {
background: #3b4456;
border-radius: 3px;
}

/* Handle on hover */
.sidebar-body::-webkit-scrollbar-thumb:hover {
background: #434e64;
}

.sidebar-balance {
display: flex;
padding: 20px 28px;
align-items: center;
gap: 14px;
background: rgba(42, 45, 58, 0.5);
margin: 20px;
border-radius: 12px;
border: 1px solid #2a2d3a;
}

.sidebar-balance .icon {
clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% 50%, 94.69616% 53.47296%, 93.79385%
56.8404%, 92.32051% 60%, 79.82051% 81.65064%, 77.82089% 84.50639%, 75.35575% 86.97152%, 72.5% 88.97114%, 69.3404%
90.44449%, 65.97296% 91.34679%, 62.5% 91.65064%, 37.5% 91.65064%, 34.02704% 91.34679%, 30.6596% 90.44449%, 27.5%
88.97114%, 24.64425% 86.97152%, 22.17911% 84.50639%, 20.17949% 81.65064%, 7.67949% 60%, 6.20615% 56.8404%, 5.30384%
53.47296%, 5% 50%, 5.30384% 46.52704%, 6.20615% 43.1596%, 7.67949% 40%, 20.17949% 18.34936%, 22.17911% 15.49361%,
24.64425% 13.02848%, 27.5% 11.02886%, 30.6596% 9.55551%, 34.02704% 8.65321%, 37.5% 8.34936%, 62.5% 8.34936%, 65.97296%
8.65321%, 69.3404% 9.55551%, 72.5% 11.02886%, 75.35575% 13.02848%, 77.82089% 15.49361%, 79.82051% 18.34936%);
background: rgba(239, 159, 115, 0.25);
width: 64px;
height: 64px;
color: #ef9f73;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}

.sidebar-balance .s-balance {
font-weight: 600;
font-size: 16px;
line-height: 23px;
color: #ffffff;
margin-bottom: 0px;
}

.sidebar-balance .s-fill-balance {
margin-top: 4px;
font-weight: 600;
font-size: 14px;
line-height: 17px;
color: #797d89;
display: flex;
align-items: center;
}

/* Sidebar Balance Button Styles */
.sidebar-balance-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
text-decoration: none;
transition: all 0.2s ease;
border-radius: 12px;
}

.sidebar-balance-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sidebar-balance-left {
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}

.sidebar-balance-text {
font-size: 13px;
font-weight: 500;
color: #a0a4b0;
line-height: 1.2;
}

.sidebar-balance-amount {
font-size: 18px;
font-weight: 700;
color: #ffffff;
line-height: 1.2;
letter-spacing: -0.3px;
}

.sidebar-balance-right {
display: flex;
align-items: center;
justify-content: center;
}

.sidebar-balance-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(195, 20, 49, 0.15);
border-radius: 10px;
color: #c31431;
font-size: 20px;
transition: all 0.2s ease;
}

.sidebar-balance-btn:hover .sidebar-balance-icon {
background: rgba(195, 20, 49, 0.25);
transform: scale(1.05);
}

.sidebar-menu-wrapper {
padding: 30px 0;
}

.sidebar-menu {
margin: 0;
padding: 0;
list-style: none;
}

.sidebar-menu .s-menu-item {
padding: 3px 35px;
position: relative;
}

.sidebar-menu .s-menu-item::before {
content: "";
position: absolute;
width: 0px;
background-color: #c31431;
box-shadow: 0px 4px 25px #c31431;
height: 100%;
top: 0px;
border-radius: 10px 0px 0px 10px;right: 0px;
}

.sidebar-menu .s-menu-item.active::before {
width: 8px;
}

.sidebar-menu .s-menu-item.active .s-menu-link {
color: #c31431;
background: rgba(195, 20, 49, 0.15);
font-weight: 700;
}

.sidebar-menu .s-menu-link {
display: flex;
font-size: 15px;
line-height: 24px;
color: #a0a4b0;
align-items: center;
padding: 14px 0;
transition: all 0.2s ease;
border-radius: 8px;
margin: 2px 0;
}

.sidebar-menu .s-menu-link:hover {
color: #ffffff;
background: rgba(195, 20, 49, 0.1);
padding-left: 8px;
}

.sidebar-menu .s-menu-link .icon {
width: 48px;
font-size: 24px;
display: flex;
align-items: center;
}

.sidebar-menu .s-menu-link .text {
font-weight: 600;
}

.sidebar-signout-wrapper {
padding: 20px 28px;
border-top: 1px solid #2a2d3a;
background: rgba(26, 29, 41, 0.5);
}

/* Signout button styles */
.sidebar-signout-wrapper .btn3 {
width: 100%;
padding: 14px 20px;
border-radius: 10px;
font-weight: 600;
font-size: 15px;
transition: all 0.2s ease;
border: 1px solid #2a2d3a;
background: rgba(42, 45, 58, 0.5);
color: #ffffff;
}

.sidebar-signout-wrapper .btn3:hover {
background: rgba(195, 20, 49, 0.15);
border-color: rgba(195, 20, 49, 0.3);
color: #c31431;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(195, 20, 49, 0.2);
}

.sidebar-signout-wrapper .btn3:active {
transform: translateY(0);
}

.d-header {
position: fixed;
left: 0px;
right: 0;
padding: 34px 0;
z-index: 1031;
border-bottom: 1px solid transparent;
transition: 0.14s ease;
}

.d-header .row.head-row {
margin-left: -6px;
margin-right: -6px;
}

.d-header .row.head-row .col-item {
padding-left: 6px;
padding-right: 6px;
}

@media (min-width: 768px) {
.d-header .row.head-row {
margin: 0 -10px;
}

.d-header .row.head-row>* {
padding: 0 10px;
}
}

@media (min-width: 1400px) {
.d-header .row.head-row {
margin: 0 -15px;
}

.d-header .row.head-row>* {
padding: 0 15px;
}
}

@media (min-width: 768px) {
.d-header {
left: 0px;
}
}

@media (min-width: 1400px) {
.d-header {
left: 280px;
background: rgba(26, 29, 41, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid #2a2d3a;
}
}

.d-header.fixed {
padding: 14px 0;
background: rgba(26, 29, 41, 0.98);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-color: #2a2d3a;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.d-header .page-title {
font-weight: 600;
font-size: 25px;
line-height: 30px;
color: #ffffff;
margin-bottom: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}

@media (min-width: 992px) {
.container-fluid {
padding: 0 30px;
}
}

@media (min-width: 1200px) {
.container-fluid {
padding: 0 40px;
}
}

@media (min-width: 1400px) {
.container-fluid {
padding: 0 50px;
}
}

.d-dropdown {
border: 1px solid #30343c;
display: inline-block;
background: rgb(30 33 39);
border-radius: 100px;
padding: 10px 27px 10px 13px;
}

.d-dropdown .btn {
padding: 0;
display: inline-flex;
align-items: center;
background-color: transparent !important;
}

@media (min-width: 768px) {
.d-dropdown .btn {
gap: 15px;
background: transparent !important;
}

.d-dropdown .btn .icon {
width: 52px;
height: 52px;
font-size: 24px;
}
}

.d-dropdown .btn:focus {
box-shadow: none;
}

.d-dropdown .btn .icon {
width: 40px;
height: 40px;
font-size: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 400;
}

.d-dropdown .btn .icon.c-1 {
background-color: #c31431;
color: #ffffff;
}

.d-dropdown .btn .icon.c-2 {
background-color: rgba(255, 90, 165, 0.26);
color: #c31431;
}

.d-dropdown .btn .icon.user-avatar {
overflow: hidden;
border: 2px solid #c31431;
}

.d-dropdown .btn .icon.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.d-dropdown .btn .title {
font-size: 15px;
line-height: 19px;
color: #ffffff;
align-items: center;
gap: 6px;
display: none;
}

.d-dropdown .btn .title span {
font-weight: 600;
}

@media (min-width: 768px) {
.d-dropdown .btn .title {
display: flex;
}
}

.d-dropdown .btn .info {
font-weight: 600;
margin-top: 4px;
font-size: 14px;
line-height: 17px;
color: #797d89;
display: none !important;
}

@media (min-width: 992px) {
.d-dropdown .btn .info {
display: flex !important;
}
}

.d-dropdown .btn::after {
content: "";
display: none;
}

.dropdown-menu {
background: #292d34;
border: 1px solid #2e313a;
border-radius: 15px;
padding: 10px 0;
}

.dropdown-menu .dropdown-item {
color: #fff;
padding: 6px 24px;
}

.dropdown-menu .dropdown-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

#PageTitle {
display: none;
}

.d-icon {
width: 34px;
height: 34px;
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
font-size: 400;
}

.d-icon.i-primary {
color: rgb(255 255 255);
background: #c31431;
}

.d-icon.i-secondary {
color: #ffffff;
background: #c31431;
}

.d-icon.i-info {
color: #ffffff;
background: #c31431;
}

.d-icon.i-warning {
color: #ffffff;
background: #c31431;
}

.d-icon.i-danger {
color: #ffffff;
background: #c31431;
}

.dropdown-toggle::after {
display: none;
}

.dashboard-head-wrapper {
position: relative;
margin-bottom: 30px;
}

.dashboard-head-wrapper .dashboard-head {
border-radius: 15px;
background-color: #1e2127;
position: relative;
}

.dashboard-head-wrapper .dhead-body {
position: relative;
z-index: 6;
padding: 20px;
}

.dashboard-head::before {
content: '';
z-index: 1;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: 15px;
background-image: none;
display: none;
}

.dashboard-head .mascot-img {
display: none;
position: absolute;
bottom: 0px;
right: 0px;
z-index: 4;
height: 100%;
}

#service_description {
display: block;
}

@media (min-width: 768px) {
.dashboard-head::before {
display: block;
}

#service_description {
display: none;
}

.dashboard-head .mascot-img {
display: block;
}

.dashboard-head-wrapper .dhead-body {
padding: 32px 38px;
max-width: 60%;
}
}

@media (min-width: 992px) {
.dashboard-head-wrapper .dhead-body {
padding: 40px 60px;
max-width: 55%;
}

.dashboard-head .mascot-img {
right: 0px;
}
}

@media (min-width: 1600px) {
.dashboard-head-wrapper .dhead-body {
padding: 70px 82px;
max-width: 55%;
}

.dashboard-head .mascot-img {
right: 80px;
}
}

.dashboard-head-wrapper .dhead-body .title {
font-weight: 600;
font-size: 35px;
line-height: 30px;
color: #ffffff;
margin-bottom: 14px;
}

.dashboard-head-wrapper .dhead-body .text {
font-weight: 600;
font-size: 16px;
line-height: 30px;
color: #797d89;
margin-bottom: 0px;
}

.dashboard-head-wrapper .dhead-body .text a {
color: #c31431;
}

.dashboard-head-wrapper .dhead-body .text-2 {
padding-top: 6px;
font-size: 14px;
line-height: 20px;
color: #72879d;
margin-bottom: 0;
}

.dh-icon {
background-color: rgba(255, 255, 255, 0.25);
color: #fff;
border-radius: 50%;
position: relative;
height: 64px;
width: 64px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
font-weight: 400;
}

.dh-icon.icon-info {
color: #ffffff;
background-color: #c31431;
border: 1px solid #3b3f4a;
}

.dh-icon.icon-primary {


color: #ffffff;
border: 1px solid #363e48;
background-color: #c31431;}

.dh-icon.icon-secondary {




color: #ffffff;
border: 1px solid #363e48;
background-color: #c31431;}

.dh-icon.icon-warning {


color: #ffffff;
border: 1px solid #363e48;
background-color: #c31431;}

.dh-icon.icon-danger {
color: #ffffff;
border: 1px solid #363e48;
background-color: #c31431;
}

.d-hello-card {
position: relative;
}

.d-hello-card .card-body {
padding: 20px;
margin-bottom: -20px;
}

@media (min-width: 992px) {
.d-hello-card .card-body {
padding: 32px 34px;
}
}

.d-hello-card .d-hello--item {
display: flex;
gap: 24px;
align-items: center;
margin-bottom: 30px;
}

.d-hello-card .d-hello--item .dh-right .text-1 {
font-weight: 600;
font-size: 17px;
line-height: 24px;
color: #ffffff;
}

.d-hello-card .d-hello--item .dh-right .text-2 {
font-weight: 600;
font-size: 22px;
line-height: 29px;
color: #ffffff;
}

.d-hello-card .d-hello--item .dh-right .text-3 {
font-weight: 600;
font-size: 15px;
line-height: 24px;
color: #ffffff;
}

.d-cat-row {
display: block;
}

.d-cat-title {
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #ffffff;
}

.d-cat-btn {
position: relative;
display: inline-flex;
background: #292d34;
border-radius: 100px;
align-items: center;
border: 1px solid #3e444e !important;justify-content: center;
padding: 6px 20px;
color: #ffffff;
outline: none;
border: 1px solid transparent;
transition: 0.14s ease;
cursor: pointer;
}

.d-cat-btn.active {
background-color: #c31431;
color: #ffffff !important;
border-color: #fc942d;
}

.d-cat-btn:hover {
background-color: #c31431;
color: #fff;
}

.d-cat-btn .text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
text-align: center;
}

.d-cat-btn .icon {
font-size: 24px;
}

.d-cat-col-right {
position: relative;
}

#new-order-cats .swiper-slide {
width: auto;
}

.no-nav {
overflow-y: auto;
}

.nav-new-order {
margin: -5px 0px;
padding: 0;
justify-content: space-between;
align-items: center;
}

.nav-new-order .nav-item {
padding: 5px 0;
}

.nav-new-order .nav-item .nav-link {
padding: 0px 0;
font-size: 16px;
line-height: 18px;
color: #797d89;
display: flex;
align-items: center;
gap: 10px;
}

.nav-new-order .nav-item .nav-link .text {
font-weight: 600;
}

.nav-new-order .nav-item .nav-link .d-icon {
background-color: rgba(121, 125, 137, 0.1);
color: #797d89;
}

.nav-new-order .nav-item .nav-link.active {
background-color: transparent;
color: #5AD7FF;
}

.nav-new-order .nav-item .nav-link.active .d-icon {
background-color: rgba(90, 215, 255, 0.1);
color: #5AD7FF;
}

.no-serds .service-title {
font-weight: 600;
font-size: 19px;
line-height: 22px;
}

.no-serds .no-ser-box {
background: #292d34;
border-radius: 15px;
border: 1px solid #363b44;font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #ffffff;
display: flex;
align-items: center;
padding: 10px 16px 10px 10px;
margin-bottom: 20px;
gap: 10px;
}

.no-serds .no-ser-box.long-text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #ffffff;
padding: 30px;
}

.no-serds .no-ser-box.long-text>div {
word-wrap: break-word !important;
max-width: 100%;
}

.no-serds .no-ser-box .title {
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: #ffffff;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100%;
}

.no-serds .no-ser-box .text {
font-weight: 500;
font-size: 14px;
line-height: 18px;
margin-left: auto;
}

.search-services {
height: 40px;
position: relative;
}

.search-services:focus-within .icon {
color: #fff;
}

.search-services .icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
color: #92969d;
transition: 0.14s ease;
}

.search-services .textbox {
width: calc(100% - 40px);
margin-left: 40px;
height: 40px;
background-color: transparent;
outline: none;
border: none;
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: 16px;
}

.search-services .textbox::placeholder {
color: #92969d;
}

.sp-service-title {
font-weight: 600;
font-size: 25px;
line-height: 29px;
color: #ffffff;
margin-bottom: 30px;
}

.btn-fav {
padding: 0;
width: 32px;
height: 32px;
color: #ffffff7f;
}

.s-row {
display: flex;
align-items: center;
gap: 10px;
}

.s-row.s-title {
font-weight: 600;
display: none;
}

.s-title-wrapper {
padding: 0 20px;
}

@media (min-width: 992px) {
.s-row.s-title {
display: flex;
}
}

.s-col {
flex: 0 0 auto;
}

@media (min-width: 992px) {
.s-col {
flex: 0 0 50px;
width: 50px;
}

.s-col.s-col-sm {
flex: 0 0 70px;
width: 70px;
}

.s-col.s-col-md {
flex: 0 0 100px;
width: 100px;
}

.s-col.s-col-lg {
flex: 0 0 180px;
width: 180px;
}

.s-col.s-title {
flex: 1 0 0;
width: auto;
}
}

.services-wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}

.services-wrapper .si-wrapper {
flex: 0 0 auto;
width: 100%;
}

@media (min-width: 768px) {
.services-wrapper .si-wrapper {
flex: 0 0 auto;
width: 50%;
padding-left: 10px;
padding-right: 10px;
}
}

@media (min-width: 992px) {
.services-wrapper {
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}

.services-wrapper .si-wrapper {
width: 100%;
}
}

.service-item {
padding: 20px 20px;
border: 1px solid #2a3f4e;
background: #1e2127;
border-radius: 15px;
margin-bottom: 20px;
}

@media (min-width: 992px) {
.service-item {
padding: 20px 0 !important;
}
}

@media (max-width: 992px) {
.service-item .s-row {
flex-wrap: wrap;
align-items: center;
}

.service-item .btn-fav {
width: 44px;
height: 44px;
border-radius: 8px;
background-color: rgba(255, 90, 165, 0.18);
color: #c31431;
border: 1px solid #c31431;
}

.service-item .s-col-avtime {
width: 100%;
text-align: center;
}

.service-item .s-col-btn {
flex: 1;
}

.service-item .s-col {
padding: 6px 0;
}

.service-item .s-col::before {
content: attr(data-title);
display: block;
padding-bottom: 6px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}

.service-item .s-col-fav {
order: 100;
}

.service-item .s-col-id {
width: 100%;
text-align: center;
}

.service-item .s-title {
width: 100%;
text-align: center;
}

.service-item .s-col-c {
width: 30%;
text-align: center;
}
}

@media (min-width: 992px) {
.service-item {
border: none;
background-color: none;
}
}

.service-item+.service-item {
border-top: 1px solid #2a3f4e;
}

.sp-serv-title {
font-weight: 600;
font-size: 14px;
line-height: 17px;
}

.sp-serv-sm {
font-weight: 600;
font-size: 16px;
line-height: 17px;
color: #fff;
}

@media (min-width: 992px) {
.sp-serv-sm {
color: #ffffff7f;
font-size: 14px;
}
}

.orlc {
border-radius: 10px;
font-weight: 600;
font-size: 14px;
line-height: 17px;
padding: 10px 10px;
}

.orlc.min {
color: #c31431;
background-color: rgb(255 138 22 / 12%);
}

.orlc.max {
color: #989898;
background-color: rgb(42 47 56);
}

.sp-services .card {
margin-bottom: 30px;
border: none;
background-color: transparent;
}

@media (min-width: 992px) {
.sp-services .card {
border: 1px solid #323843;
background: #1e2127;
}
}

.af-text {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
margin-bottom: 0px;
}

.card-af-top {
margin-bottom: 30px;
}

.af-nav {
background: #292d34;
border-radius: 105px;
display: inline-flex;
flex-wrap: wrap;
padding: 5px;
margin: 0 !important;
}

.af-nav .nav-item {
position: relative;
}

.af-nav .nav-link {
font-weight: 600;
font-size: 14px;
line-height: 16px;
padding: 15px 20px;
color: #ffffff;
border-radius: 100px;
}

.af-nav .nav-link.active {
background-color: #c31431;
}

.af-nav-pay {
display: flex;
margin: 0 0 10px 0 !important;
justify-content: space-between;
gap: 10px;
}

.af-nav-pay .nav-item {
position: relative;
flex: 1;
margin-bottom: 10px;
}

.af-nav-pay .nav-link {
font-weight: 600;
font-weight: 600;
font-size: 12px;
line-height: 15px;
color: #ffffff;
padding: 15px 0px;
width: 100%;
border-radius: 10px;
background: #1e2127;
border: 1px solid #2b2f38;
box-sizing: border-box;
border-radius: 15px;
}

.af-nav-pay .nav-link .icon {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}

.af-nav-pay .nav-link.active {
background-color: #c31431;
border-color: #c31431;
}

.af-pm-title {
font-weight: 600;
font-size: 25px;
line-height: 25px;
color: #ffffff;
margin-bottom: 14px;
}

.af-pm-about {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #787f8d;
margin-bottom: 30px;
}

.af-pm-text {
font-size: 16px;
line-height: 25px;
color: #ffffff;
}

.af-pm-img {
width: 100px;
}

.af-ph {
background: #293141;
border: 1px solid #333d54;
box-sizing: border-box;
border-radius: 15px;
font-weight: 600;
font-size: 16px;
line-height: 18px;
padding: 20px 24px;
margin-bottom: 14px;
}

.orders-nav-wrapper {
padding-top: 20px;
margin-bottom: 30px;
}

.orders-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
}

.orders-nav-link {
background: #1e2127;
border: 1px solid #393e49;
box-sizing: border-box;
border-radius: 10px;
display: block;
display: flex;
align-items: center;
gap: 10px;
color: #fff;
padding: 10px 20px;
margin-bottom: 10px;
}

.orders-nav-link:focus {
box-shadow: 0 0 0 0.25rem rgb(45 250 213 / 0%);
}

.orders-nav-link.active {
background-color: #c31431;
border-color: #c31431 !important;
color: #ffffff;
}

.orders-nav-link:hover {
background-color: #c31431;
border-color: rgb(237 142 48);
color: #ffffff;
}

@media (min-width: 992px) {
.orders-nav-link {
padding: 10px 13px;
}
}

@media (min-width: 1200px) {
.orders-nav-link {
padding: 11px 15px;
}
}

@media (min-width: 1400px) {
.orders-nav-link {
padding: 14px 18px;
}
}

.orders-nav-link .icon {
font-size: 20px;
display: flex;
align-items: center;
}

.orders-nav-link .text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
}

.op-search-box {
transition: 0.14s ease;
}

.op-search-box:focus-within {
box-shadow: 0 0 0 0.25rem rgba(45, 250, 213, 0.25);
}

.op-search-box:hover {
background: #293142;
border: 1px solid #353f55;
}

.op-search-box .icon {
color: #e0e0e0;
}

.op-search-box input {
transition: 0.14s ease;
background-color: #ffffff00;
border: none;
outline: none;
flex: 1;
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: 16px;
}

.op-search-box input::placeholder {
color: #566676;
}

.op-card {
margin-bottom: 30px;
}

.op-card .op-card--top {
padding-bottom: 30px;
border-bottom: 1px solid #353f55;
}

.op-card .op-card--bottom {
padding-top: 30px;
}

.op-stats {
display: block;
font-weight: 600;
font-size: 14px;
line-height: 20px;
text-align: center;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 15px;
padding: 20px 34px;
}

.op-stats.op-stats-sm {
padding: 16px 30px;
border-color: rgba(255, 255, 255, 0.15) !important;
}

.op-stats.op-stats-btn {
padding: 20px 20px;
display: inline-block;
background: #293142;
border: 1px solid #566676;
color: #566676;
transition: 0.14s ease;
}

.op-stats.op-stats-btn:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.op-stats.op-stats-btn.cs-btn {
font-size: 24px;
margin-bottom: 0;
}

.op-stats.primary {
background-color: rgba(45, 250, 213, 0.15);
border-color: #c31431;
color: #ff9b38;
}

.op-stats.secondary {
background-color: rgba(255, 90, 165, 0.15);
border-color: #c31431;
color: #c31431;
}

.op-stats.info {
background-color: rgba(90, 215, 255, 0.15);
border-color: #5AD7FF;
color: #5AD7FF;
}

.op-stats.warning {
background-color: rgba(237, 126, 88, 0.15);
border-color: #ED7E58;
color: #ED7E58;
}

.op-stats.danger {
background-color: rgba(238, 91, 91, 0.15);
border-color: #EE5B5B;
color: #EE5B5B;
}

.op-stats.danger:focus {
box-shadow: 0 0 0 0.25rem rgba(238, 91, 91, 0.25);
}

.op-service-title {
font-weight: 600;
font-size: 14px;
line-height: 25px;
color: #ffffff;
margin-bottom: 0px;
}

.op-search-box.op-order-link {
display: flex;
width: 100%;
}

.op-search-box.op-order-link .link {
display: block;
width: 100%;
flex: 1 0 0;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #637990;
opacity: 0.8;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.op-date {
font-weight: 600;
font-size: 16px;
line-height: 25px;
color: #566676;
}

.op-date::before {
content: "";
width: 9px;
height: 9px;
background: #9aacbd;
display: inline-block;
border-radius: 50%;
margin-right: 14px;
margin-left: 0px;
display: none;
}

@media (min-width: 992px) {
.op-date::before {
display: block;
}
}

.op-item {
display: flex;
align-items: center;
gap: 8px;
flex-direction: column;
}

@media (min-width: 992px) {
.op-item {
flex-direction: row;
}
}

.op-item .title {
font-size: 16px;
line-height: 18px;
color: #72879d;
}

.op-item .icon {
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}

.op-item .text {
font-weight: bold;
font-size: 23px;
line-height: 27px;
color: #ffffff;
}

.sc-ticket-card {
padding: 20px;
display: block;
text-decoration: none;
background: #293141;
border: 1px solid #333d54;
box-sizing: border-box;
border-radius: 15px;
transition: 0.14s ease;
margin-bottom: 15px;
}

.sc-ticket-card:hover {
border-color: rgba(45, 250, 213, 0.18);
}

.sc-ticket-card .sctc-title {
margin-top: 6px;
font-weight: 600;
font-size: 13px;
line-height: 15px;
color: #797d89;
}

.sc-ticket-card .sctc-text {
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #ffffff;
}

.sd-head {
padding: 20px 0 30px;
}

.sd-back {
display: block;
padding: 10px 0 12px;
margin: 10px 0;
color: #fff;
position: relative;
display: flex;
align-items: center;
text-decoration: none;
font-weight: 600;
font-size: 16px;
line-height: 20px;
}

.sd-back:hover {
color: #fff;
}

.sd-back:hover::after {
left: -18px;
right: -18px;
}

.sd-back i,
.sd-back span {
position: relative;
z-index: 3;
}

.sd-back::after {
content: "";
height: 2px;
background-color: #2dfad5;
position: absolute;
left: 0;
right: 0;
bottom: 0;
transition: 0.14s ease;
}

.sd-tid {
display: flex;
align-items: center;
gap: 30px;
}

.sd-tid .title {
font-weight: 600;
font-size: 25px;
line-height: 31px;
margin: 0px;
}

.sd-tid .tid {
display: block;
background: rgba(255, 90, 165, 0.15);
border-radius: 10px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #c31431;
padding: 14px 30px;
}

.tc-tdet-title {
font-weight: 600;
font-size: 25px;
line-height: 31px;
margin-bottom: 0px;
}

.tc-tick-id {
background-color: #2dfad5;
color: #fff;
border-radius: 10px;
font-size: 16px;
line-height: 20px;
padding: 10px 28px;
}

.tc-ti-title {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #72879d;
margin-bottom: 0px;
}

.tc-ti-text {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #fff;
}

.card.tc-ti-box {
background-image: none;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
}

.card.tc-ti-box .card-body {
padding: 20px;
}

@media (min-width: 768px) {
.card.tc-ti-box .card-body {
padding: 24px;
}
}

@media (min-width: 992px) {
.card.tc-ti-box .card-body {
padding: 42px 33px;
}
}

@media (min-width: 1400px) {
.card.tc-ti-box .card-body {
padding: 50px 38px;
}
}

.card.tc-ti-box .title {
font-weight: 600;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
}

.card.tc-ti-box .text {
font-size: 14px;
line-height: 18px;
letter-spacing: -0.04em;
color: #7e96ad;
}

.card.tc-ti-box .text p {
margin-bottom: 28px;
}

.card.tc-ti-box .elnao7-mark {
font-weight: 600;
font-size: 25px;
line-height: 29px;
letter-spacing: -0.04em;
}

.ticket-message-block {
display: flex;
}

.ticket-message-block.ticket-message-left+.ticket-message-left {
margin-top: -50px;
}

.ticket-message-block.ticket-message-right+.ticket-message-right {
margin-top: -50px;
}

.ticket-message-block.ticket-message-right {
justify-content: flex-end;
}

.ticket-message-block.ticket-message-right .ticket-msg-container {
text-align: right;
}

.ticket-message-block.ticket-message-right .ticket-msg-container .ticket-msg {
background: #39445c;
border-radius: 20px 20px 0 20px;
}

.ticket-message-block.ticket-message-left .ticket-msg-container .ticket-msg {
border-radius: 20px 20px 20px 0px;
}

.ticket-message-block .ticket-msg-container {
width: 100%;
max-width: 400px;
}

.ticket-message-block .ticket-msg-container .ticket-msg {
background: #c31431;
border-radius: 30px;
padding: 14px 26px;
display: inline-flex;
margin-bottom: 12px;
font-weight: 500;
font-size: 13px;
line-height: 22px;
letter-spacing: 0.3px;
color: #fff;
}

.ticket-message-block .ticket-msg-container .date-time {
font-size: 12px;
line-height: 15px;
color: #747886;
margin-bottom: 30px;
padding: 0 10px;
opacity: 0;
display: block;
}

.ticket-message-right~.ticket-message-right .ticket-msg-container .date-time {
opacity: 0;
}

.ticket-message-left~.ticket-message-right .ticket-msg-container .date-time {
opacity: 1;
}

.ticket-message-left~.ticket-message-left .ticket-msg-container .date-time {
opacity: 0;
}

.ticket-message-right~.ticket-message-left .ticket-msg-container .date-time {
opacity: 1;
}

.schat-body .schat-chat-body {
max-height: 553px;
overflow-y: auto;
}

.schat-body .schat-chat-body::-webkit-scrollbar {
width: 6px;
border-radius: 3px;
}

.schat-body .schat-chat-body::-webkit-scrollbar-track {
background: #252c3b;
border-radius: 3px;
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb {
background: #3e4553;
border-radius: 3px;
transition: 0.14s ease;
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb:hover {
background: #606778;
}

.schat-body .schat-input {
padding-top: 10px;
}

.schat-msg-input {
position: relative;
display: flex;
background-color: rgba(57, 68, 92, 0.5);
border-radius: 10px;
height: 70px;
align-items: center;
}

.schat-msg-input input {
border: none;
outline: none;
background: transparent;
flex: 1;
padding: 0 30px;
color: #fff;
font-size: 14px;
line-height: 17px;
color: #acacac;
}

a {
color: #c31431;
transition: 0.14s ease;
text-decoration: none;
}

a:hover {
color: #19b7e7;
text-decoration: underlin;
}

.payments-table {
width: 100%;
}

.payments-table tr {
background: #f9f9f9;
border-radius: 10px;
padding: 12px 14px;
display: block;
display: flex;
align-items: center;
margin: 0 -10px;
justify-content: space-between;
margin-bottom: 14px;
}

.payments-table tr>td {
padding: 0 10px;
}

.payments-table .pyt-id {
background: #21c5fb;
border-radius: 7px;
color: #fff;
padding: 12px 24px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
}

.payments-table .pyt-title {
font-weight: bold;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
}

.payments-table .pyt-text {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #21c5fb;
margin-bottom: 0px;
}

.btn.sd-send-btn {
box-shadow: none;
display: flex;
align-items: center;
}

.cp-sns-title {
font-weight: 600;
font-size: 19px;
line-height: 23px;
color: #ffffff;
margin-bottom: 30px;
}

.cp-sns-dns {
background: #c31431;
border-radius: 10px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
background-color: #c31431;
padding: 24px 20px;
text-align: center;
margin-bottom: 20px;
}

.cp-right-box {
height: 100%;
position: relative;
overflow: hidden;
}

.cp-right-box .cp-r-img {
position: absolute;
z-index: 1;
right: 0px;
bottom: 0px;
top: 0px;
width: 100%;
background-image: url(https://cdn.smmspot.net/cloutsy/assets/img/cp-img.png);
background-repeat: no-repeat;
background-position: right bottom;
background-size: auto 80%;
}

.cp-right-box .card-body {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
justify-content: center;
}

.cp-right-box .cp-r-title {
font-weight: 600;
font-size: 25px;
margin-left: 25px;line-height: 31px;
}

.cp-right-box .cp-r-text {
margin-top: 6px;
font-size: 16px;
line-height: 20px;
color: #a2a4a9;
width: 100%;
}

@media (min-width: 992px) {
.cp-right-box .cp-r-text {
max-width: 50%;
margin-left: 25px;}
}

.cp-top {
margin-bottom: 30px;
}

.cp-exclamation {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #252C3B;
background-color: #EE5B5B;
font-size: 12px;
font-weight: 700;
}

.aq {
position: relative;
}

.aq .aq-item {
background: #1e2127;
border: 1px solid #2b2f38;
border-radius: 10px;
transition: 0.32s cubic-bezier(0.17, 0.67, 0.71, 1.34);
margin-bottom: 20px;
}

.aq .aq-item:focus-within {
box-shadow: 0 0 0 0.25rem rgba(103, 103, 103, 0.16);
}

.aq .aq-item .aq-content {
padding: 0px 26px 0px;
overflow: hidden;
max-height: 0px;
transition: 0.32s ease;
}

.aq .aq-item .i-1 {
display: block;
}

.aq .aq-item .i-2 {
display: none;
}

.aq .aq-item.active .i-1 {
display: none;
}

.aq .aq-item.active .i-2 {
display: block;
}

.aq .aq-item.active .aq-content {
padding: 8px 26px 24px;
max-height: 1000px;
}

.aq .aq-btn {
width: 100%;
display: block;
font-size: 16px;
line-height: 20px;
display: flex;
color: #fff;
align-items: center;
padding: 24px 0px;
border: none;
outline: none;
background-color: transparent;
}

.aq .aq-btn .aq-btn-text {
font-weight: 600;
padding-left: 20px;
text-align: left;
}

.aq .aq-btn .aq-btn-right {
color: #fff;
font-size: 20px;
margin-left: auto;
width: 72px;
opacity: 0.6;
}

.afp-ftext {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
}

.afp-top {
margin-bottom: 30px;
}

.aft-item {
display: flex;
gap: 17px;
align-items: center;
margin: 5px 0;
}

.aft-item .title {
font-weight: 600;
font-size: 14px;
line-height: 18px;
color: #4e5d7c;
margin-bottom: 4px;
}

.aft-item .text {
font-weight: 600;
font-size: 16px;
line-height: 22px;
color: #ffffff;
}

.aft-box-row {
margin: 0 -8px -10px;
}

.aft-box-row>.col {
padding: 0 8px;
}

.aft-box-row>.col:nth-child(1n) .aft-box::after {
background-color: #c3143100;
}

.aft-box-row>.col:nth-child(2n) .aft-box::after {
background-color: #2dfad500;
}

.aft-box-row>.col:nth-child(3n) .aft-box::after {
background-color: #ed7e5800;
}

.aft-box-row>.col:nth-child(4n) .aft-box::after {
background-color: #2dfad500;
}

.aft-box-row>.col:nth-child(5n) .aft-box::after {
background-color: #26262600;
}

.aft-box-row>.col:nth-child(6n) .aft-box::after {
background-color: #ee5b5b00;
}

.aft-box {
background: #23272e;
border-radius: 10px;
padding: 20px;
position: relative;
overflow: hidden;
border: 1px solid #373d48;margin-bottom: 16px;
}

.aft-box .title {
font-weight: 600;
font-size: 14px;
line-height: 17px;
color: #ffffff;
}

.aft-box .text {
font-weight: 600;
font-size: 25px;
line-height: 25px;
color: #ffffff;
}

.aft-box:hover::after {
height: 10px;
}

.aft-box::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 5px;
background-color: #fff;
transition: 0.14s ease;
}

.acc-switch {
display: flex;
background: #272b32;
border-radius: 100px;
border: 1px solid #3a3f4a !important;height: 62px;
padding: 8px;
outline: none;
border: none;
min-width: 122px;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
transition: 0.14s ease;
}

.acc-switch:focus {
box-shadow: 0 0 0 0.25rem rgb(255 90 165 / 0%);
}

.acc-switch.gs-female .acc-switch-bg {
left: 50%;
}

.acc-switch .acc-switch-bg {
position: absolute;
z-index: 3;
border-radius: 30px;
background-color: #c31431;
left: 8px;
width: calc(50% - 8px);
top: 8px;
bottom: 8px;
transition: 0.2s ease;
}

.acc-switch .btn-gender {
position: relative;
z-index: 5;
outline: none;
border: none;
background-color: transparent;
width: calc(50% - 8px);
font-size: 18px;
line-height: 16px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}

.acc-user {
display: flex;
align-items: center;
gap: 16px;
}

.acc-user .acc-avatar {
height: 74px;
width: 74px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 3px solid #2dfad5;
}

.acc-user .acc-avatar img {
width: calc(100% - 6px);
height: calc(100% - 6px);
border-radius: 50%;
object-fit: cover;
}

.acc-user .acc-username {
font-weight: 600;
font-size: 19px;
line-height: 23px;
color: #ffffff;
}

.acc-user .acc-mail {
font-size: 16px;
line-height: 19px;
color: #4e5d7c;
}

.acc-card-left {
display: flex;
justify-content: center;
height: 100%;
}

.acc-card-left .card-body {
display: flex;
align-items: center;
width: 100%;
}

.acc-card-left .card-body .row {
width: calc(100% + 30px);
}

.acc-api {
display: flex;
padding: 16px 18px 16px 22px;
background: rgba(45, 250, 213, 0.25);
border-radius: 15px;
color: #2dfad5;
align-items: center;
}

.acc-api .acc-api-key {
font-weight: 600;
font-size: 14px;
line-height: 17px;
text-align: center;
color: #2dfad5;
}

.acc-api a {
margin-left: auto;
font-size: 24px;
line-height: 1;
}

.blog-page .dashboard-head-wrapper {
padding-top: 100px;
}

@media (min-width: 992px) {
.blog-page .dashboard-head-wrapper .text {
width: 64%;
}
}

.blog-page .dashboard-head-wrapper .r-image {
position: absolute;
right: 30px;
bottom: 0px;
}

.bp-blogs-wrapper {
padding: 0 0 80px;
}

.blog-head {
padding: 30px;
display: flex;
align-items: center;
gap: 16px;
}

.blog-head .blog-avatar {
width: 50px;
height: 50px;
border: 2px solid #c31431;
border-radius: 50%;
overflow: hidden;
}

.blog-head .blog-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.blog-head .blog-head--username {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #ffffff;
margin-bottom: 4px;
}

.blog-head .blog-head--site {
font-weight: 600;
font-size: 12px;
line-height: 14px;
color: #92969d;
}

.card-blog {
margin-bottom: 30px;
}

.card-blog .blog-img-wrapper {
overflow: hidden;
position: relative;
padding-top: 48%;
}

.card-blog .blog-img-wrapper img {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
object-fit: cover;
}

.card-blog .blog-title {
padding: 30px;
}

.card-blog .blog-title h2 {
margin-bottom: 0;
font-weight: 600;
font-size: 25px;
line-height: 29px;
}

.card-blog .blog-content {
padding: 30px;
font-size: 14px;
line-height: 21px;
color: #92969d;
}

.card-blog .blog-footer {
padding: 30px;
}

.card-blog .blog-read-more {
font-size: 16px;
line-height: 14px;
letter-spacing: -0.02em;
color: #ffffff;
display: flex;
align-items: center;
}

.card-blog .blog-read-more:hover {
color: #2dfad5;
}

.card-blog .blog-read-more i {
display: flex;
align-items: center;
justify-content: center;
}

.card-blog .blog-read-more span {
font-weight: 600;
}

.blog-border {
position: relative;
}

.blog-border::after {
content: "";
position: absolute;
bottom: 0;
left: 30px;
right: 30px;
height: 1px;
background: #2d3138;
}

.blog-share-wrapper {
display: flex;
gap: 10px;
}

.blog-share-btn {
display: inline-block;
background: #c31431;
border: 1px solid #374462;
box-sizing: border-box;
border-radius: 100px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: 0.14s ease;
}

.blog-share-btn i {
transition: 0.14s ease;
}

.blog-share-btn:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.blog-share-btn:hover {
color: #fff;
}

.blog-share-btn:hover i {
transform: scale(1.2);
}

.bi-head-wrapper {
padding: 30px 0;
}

.bi-head-box {
background: #19202a;
border: 1px solid #353f55;
box-sizing: border-box;
border-radius: 35px;
position: relative;
}

.bi-head-box .bi-head-bg {
position: absolute;
left: 0;
top: 0;
border-radius: 35px;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0.15;
}

.bi-head-box .bi-head-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}

.bi-head-box .bi-head-content {
position: relative;
z-index: 5;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

@media (min-width: 992px) {
.bi-head-box .bi-head-content {
padding: 90px 30px;
}
}

.bi-head-box .bi-head-content .bi-cat-wrapper {
display: flex;
justify-content: center;
padding-bottom: 30px;
}

.bi-head-box .bi-head-content .bi-cat-wrapper .bi-cat {
display: inline-block;
background: #c31431;
border: 1px solid #faac5e;
box-sizing: border-box;
color: #ffffff;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
line-height: 18px;
letter-spacing: -0.04em;
padding: 15px 45px;
}

.bi-head-box .bi-head-content .bi-title h1 {
font-weight: 600;
font-size: 35px;
line-height: 40px;
}

.bi-head-box .bi-head-content .user-wrapper {
display: flex;
align-items: center;
justify-content: center;
}

.bi-head-box .bi-head-content .user-wrapper .blog-head {
padding: 24px 0 0 0;
}

.bi-service-category {
padding: 0 0 30px 0;
}

.bi-service-category .bi-s-title {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #ffffff;
}

.bi-service-category .bi-s-text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #92969d;
margin: 0;
}

.blog-content {
padding-bottom: 30px;
}

.bi-content {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
}

.bi-content strong {
color: #fff;
}

.bi-content img,
.bi-content table {
max-width: 100%;
}

.bi-share-section {
padding-bottom: 30px;
}

.bi-share-section .blog-share-wrapper {
justify-content: space-between;
}

@media (min-width: 768px) {
.bi-share-section .blog-share-wrapper {
justify-content: flex-start;
gap: 30px;
}

.bi-share-section .blog-share-wrapper .blog-share-btn {
position: relative;
}

.bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
content: "";
position: absolute;
left: -15px;
height: calc(100% + 48px);
top: 50%;
transform: translateY(-50%);
width: 1px;
background-color: #2a3f4e;
}
}

@media (min-width: 992px) {
.bi-share-section .blog-share-wrapper {
gap: 50px;
}

.bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
left: -25px;
}
}

@media (min-width: 1400px) {
.bi-share-section .blog-share-wrapper {
gap: 80px;
}

.bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
left: -40px;
}
}

.bi-about-cloutsy {
padding-bottom: 30px;
}

.bi-about-cloutsy .bi-about-avatar {
width: 72px;
height: 72px;
border: 2px solid #2dfad5;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
}

.bi-about-cloutsy .bi-about-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.bi-about-cloutsy .bia-title {
font-weight: 600;
font-size: 25px;
line-height: 29px;
color: #ffffff;
}

.bi-about-cloutsy .bia-text {
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
margin: 0;
}

.api-page #PageTitle {
display: block;
font-weight: 600;
font-size: 35px;
line-height: 30px;
}

.api-page p {
margin-bottom: 0;
font-size: 16px;
line-height: 22px;
color: #92969d;
}

.api-page h6 {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #ffffff;
}

.api-title-section {
padding: 60px 0 30px;
}

.api-title {
font-size: 19px;
line-height: 22px;
color: #ffffff;
}

.api-text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #92969d;
}

.api-section {
padding: 0 0 30px;
}

.api-section .card-header .api-title {
margin-bottom: 0;
}

@media (min-width: 992px) {

.api-section .card .card-body,
.api-section .code.card-body {
padding: 40px;
}
}

.api-section .card-body .row {
margin-bottom: -2rem;
}

.api-section .code {
color: rgba(255, 255, 255, 0.6);
}

.register-page {
position: relative;
min-height: 100vh;
padding: 40px 0;
display: flex;
align-items: center;
}

.register-page::before {
content: "";
position: absolute;
left: 0px;
width: 50%;
bottom: 0px;
top: 0px;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

@media (min-width: 768px) {
.register-page::before {
background-image: none;
border: 1px solid #232630;}
}

.register-page .testi-card {
margin-bottom: 0px;
padding-bottom: 0px;
}

.register-page .testi-card .tc-content {
border: none !important;
margin-bottom: 0px;
padding-bottom: 0px;
}

.register-page .testi-card .tc-text {
margin: 0 !important;
}

.register-page .sd-back::after {
opacity: 0;
}

.rp-content {
width: 100%;
position: relative;
z-index: 10;
}

.rp-left-title {
font-weight: 600;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
margin-top: 36px;
margin-bottom: 24px;
background: linear-gradient(89.31deg, rgb(255 138 22 / 28%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.rp-left-text {
font-size: 16px;
line-height: 24px;
letter-spacing: -0.04em;
color: #ffffff42;
margin-bottom: 60px;
}

.rp-left-s-title {
font-weight: 600;
font-size: 25px;
line-height: 29px;
letter-spacing: -0.04em;
background: linear-gradient(89.31deg, rgb(255 138 22 / 26%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.rp-icon {
background: rgba(45, 250, 213, 0.26);
color: #2dfad5;
font-size: 24px;
border-radius: 16px;
width: 56px;
height: 56px;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
}

.rp-sign-up-title {
font-weight: 600;
font-size: 24.226px;
line-height: 28px;
letter-spacing: -0.04em;
color: #ffffff;
}
/** actulus */

.select-container {
position: relative;
width: 100%;
}

.select-container.open .select-options-wrapper {
display: flex;
}

.select-container.open .select-arrow {
transform: rotate(180deg);
}

.select-button {
width: 100%;
display: flex;
align-items: center;
padding: 10px 20px;
cursor: pointer;
background-color: transparent;
transition: 0.14s ease;
outline: none;
line-height: 20px;
background: #292d34;
border: 1px solid #3a3f49;
box-sizing: border-box;
border-radius: 15px;
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #ffffff;
padding: 20px 25px;
}

.select-button:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
}

.selected-text {
font-size: 16px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}

.select-arrow {
position: absolute;
right: 14px;
top: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.14s ease;
}

.select-options-wrapper {
border-radius: 20px;
position: absolute;
z-index: 6;
display: none;
align-items: center;
flex-direction: column;
transition: 0.14s ease;
background: #292d34;
border: 1px solid #30333c;
top: 70px;
width: 100%;
}

.select-options {
position: relative;
width: 100%;
margin: 0;
padding: 10px 8px;
display: flex;
gap: 2px;
flex-direction: column;
max-height: 340px;
overflow-y: auto;
}
.select-options::-webkit-scrollbar {
width: 6px;
}

/* Track */
.select-options::-webkit-scrollbar-track {
background: #2e384c;
border-radius: 3px;
}

/* Handle */
.select-options::-webkit-scrollbar-thumb {
background: #3b4456;
border-radius: 3px;
}

/* Handle on hover */
.select-options::-webkit-scrollbar-thumb:hover {
background: #434e64;
}

.select-option {
display: block;
font-weight: 600;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
text-align: left;
color: #7c7c7c;
}

.select-option:hover,
.select-option:focus {
background-color: rgba(255, 255, 255, 0.1);
}

.select-option.active {
color: #fff;
}

.search-container {
width: 100%;
padding: 10px 10px 3px;
}

.search-input {
width: 100%;
border: 1px solid #eee;
border-radius: 4px;
height: 38px;
padding: 0 14px;
outline: none;
}

.search-input:focus {
box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.1);
}

.form-group {
margin-bottom: 1.5rem !important;
}

.modal-content {
background: #252c3b;
border-radius: 15px;
border: 1px solid #3e5566;
}

.modal-title {
line-height: 1.3;
font-size: 19px;
font-weight: 600;
}

.modal-header {
border-bottom: 1px solid #648ab04a;
}

.modal-body {
color: rgba(255, 255, 255, .6);
padding-top: 30px;
line-height: 1.3;
}

.ticket-response {
margin-bottom: 20px;
display: none;
}

.ticket-response.active {
display: block;
}
.alert.alert-success {
color: #09b797;
background: #2dfad431;
}

.alert.alert-danger {
color: #EE5B5B;
background: #ee5b5b41;
}

.alert .close {
position: absolute;
right: 20px;
top: 13px;
outline: none;
background-color: transparent;
border: none;
font-size: 20px;
color: #fff;
}

.pagination li.active .page-link {
background-color: #1e2127;
color: #c31431;
}

.pagination li.active .page-link::before {
content: "";
bottom: 0px;
height: 3px;
width: 14px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #c31431;
}

.pagination li.page-item-before .page-link {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
font-weight: 400;
}

.pagination li.page-item-next .page-link {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
font-weight: 400;
}

.pagination li .page-link {
border: none;
margin: 0;
height: 50px;
padding: 0px;
min-width: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 17.3005px;
line-height: 18px;
color: #989898;
position: relative;
background-color: #1e2127;
}

.pagination li .page-link:focus {
z-index: 2;
}

.bootstrap-datetimepicker-widget {
color: #fff;
}

.bootstrap-datetimepicker-widget .list-unstyled {
padding: 14px;
}

.bootstrap-datetimepicker-widget .day:hover {
background-color: rgba(255, 255, 255, 0.117) !important;
}

.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget .prev:hover,
.bootstrap-datetimepicker-widget .next:hover {
background-color: rgba(255, 255, 255, 0.117) !important;

}

/**
* player
*/

.sidebar-player {
background-color: rgba(255, 255, 255, 0.03);
padding: 10px;
width: 100%;
}

.sidebar-player .control-wrapper {
margin: 4px -6px 0;
display: flex;
align-items: center;
gap: 6px;
}

.sidebar-player .control-btn {
outline: none;
border: none;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: rgba(255, 255, 255, 0.769);
background-color: transparent;
border-radius: 50%;
}

.sidebar-player .control-btn:hover {
background-color: rgba(255, 255, 255, 0.04);
}

.sidebar-player .control-btn .i-pause {
display: none;
}

.sidebar-player .a-of-total {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}

.sidebar-player.playing .album-cover {
animation: rotating 10s linear infinite;
}

.sidebar-player.playing .control-btn .i-play {
display: none;
}

.sidebar-player.playing .control-btn .i-pause {
display: flex;
}

.player-content {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 1;
width: 100%;
}

.album-cover {
width: 44px;
height: 44px;
border-radius: 50%;
transition: 0.14s ease;
}

.album-cover img {
object-fit: cover;
max-width: 100%;
height: 100%;
border-radius: 50%;
}

.player-right {
flex: 1;
}

.player-right .song-name {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
margin-bottom: 0px;
}

.control-btn .i-off {
display: flex;
}

.control-btn .i-on {
display: none;
}

.control-btn.enabled .i-off {
display: none;
}

.control-btn.enabled .i-on {
display: flex;
}

@keyframes rotating {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

.nwo-video {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .75);
z-index: 3000;
display: none;
}

.nwo-video.active {
display: block;
}

.nwo-video-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 700px;
width: 100%;
}

.nwo-video-wrapper {
position: relative;
padding-top: 56.25%;
width: 100%;
border-radius: 20px;
}

.nwo-video-wrapper iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.nwo-video-close {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -65px;
background-color: #262626;
color: #77b6ab;
height: 50px;
font-size: 16px;
font-weight: 600;
outline: none;
border: none;
padding: 0 20px;
border-radius: 25px;
transition: .14s ease;
}

.nwo-video-close:hover {
color: #2dfad5;
}

.op-card--bottom-close {
display: none;
}

@media (max-width: 768px) {
.op-card .op-card--top {
border-color: transparent;
padding-bottom: 0px;
}

.op-stats {
padding: 13px 23px;
}

.op-stats.op-id {
background-color: transparent;
border: none;
padding: 0px;
}
.op-card .op-card--bottom {
position: fixed;
bottom: -1px;
background: #262c3b;
left: 0px;
right: 0px;
max-height: 80vh;
border-radius: 25px 25px 0 0;
z-index: 2000;
padding-bottom: 30px;
padding-top: 64px;
overflow-y: auto;
box-sizing: border-box;
box-shadow: 0 -4px 41px rgba(0, 0, 0, .5);
padding-left: 12px;
padding-right: 12px;
display: none;
transform: translateY(110%);
}

.op-card--bottom-close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
position: absolute;
right: 10px;
top: 9px;
background-color: rgb(39, 200, 255, .18);
color: rgba(39, 200, 255, 1);
border: none;
outline: none;
}
}

.sp-modal {
position: fixed;
z-index: 2020;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
display: none;
align-items: center;
justify-content: center;
}

.sp-modal.active {
display: flex;
}

@media (min-width: 768px) {
.sp-modal {
padding: 30px 0;
overflow-y: auto;
}
}

.sp-modal-card {
background: #1e2127;
box-sizing: border-box;
position: fixed;
z-index: 2021;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: flex;
flex-direction: column;
}

@media (min-width: 768px) {
.sp-modal-card {
left: initial;
right: initial;
top: initial;
bottom: initial;
border-radius: 25px;
max-width: 600px;
width: 100%;
position: relative;
border: 1px solid #2d3139;
max-height: calc(100vh - 80px);
}
}

.sp-modal-header {
background-image: none;
background-size: cover;
background-position: center;
padding: 22px 20px 16px;
position: relative;
z-index: 2030;
text-align: center;
}

@media (min-width: 768px) {
.sp-modal-header {
padding: 64px 30px 100px;
border-radius: 25px 25px 0 0;
}
}

.sp-modal-service-id {
background: #c3143126;
border-radius: 15px;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #c31431;
padding: 14px 22px;
display: inline-block;
margin-bottom: 22px;
}

.sp-modal-service-title {
font-weight: 600;
font-size: 25px;
line-height: 30px;
text-align: center;
color: #fff;
}

.sp-modal-body {
position: relative;
z-index: 2040;
padding: 30px;
flex: 1;
overflow-y: auto;
}

@media (min-width: 768px) {
.sp-modal-body {
margin-top: -64px;
padding: 0 30px 30px;
flex: inherit;
overflow: inherit;
}

.sp-modal-body-card {
background: #1e2127;
border: 1px solid #3a3f49;
box-sizing: border-box;
border-radius: 15px;
padding: 28px;
margin-bottom: 22px;
}
}

.sp-modal-body-card {
margin-bottom: 22px;
}

.sp-modal-close {
border-radius: 50%;
width: 52px;
height: 52px;
border: none;
outline: none;
background: transparent;
position: absolute;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
top: 20px;
right: 20px;
z-index: 2050;
font-size: 24px;
}

.mobile-navbar {
position: fixed;
z-index: 1031;
left: 0px;
right: 0px;
bottom: 0px;
height: 56px;
border-top: 1px solid;
background-color: #252c3b;
border-color: #313949;
padding: 0 10px;
}

.mobile-navbar-content {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-around;
}

.mnc-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #797d89;
}

.mnc-item.active {
color: #fff;
}

.mnc-item-icon {
font-size: 20px;
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
}

.mnc-item-text {
font-size: 12px;
font-weight: 500;
}

@media (min-width: 768px) {
.mobile-navbar {
display: none;
opacity: 0;
transform: translateY(100%);
}
}

.table {
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #212529;
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
--bs-table-active-color: #212529;
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: #212529;
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
width: 100%;
margin-bottom: 1rem;
color: #ffffff;
vertical-align: top;
border-color: #dee2e6;
}
.ds-first {
position: relative;
padding-bottom: 40px;
}

.ds-first-card {
background: url(https://storage.perfectcdn.com/fsvxaw/lw7fcug44echc8om.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.ds-status {
position: relative;
width: 153.83px;
height: 46.95px;

background: #c31431;
border-radius: 50px;

display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #FFFFFF;
}
.ds-level-text {
font-weight: 600;
font-size: 35px;
line-height: 30px;
letter-spacing: -0.005em;
color: #FFFFFF;
margin-top: 20px;
}

.ds-card {
background: #293142;
border: 1px solid #313949;
border-radius: 15px;

font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #FFFFFF;

display: flex;
text-align: center;
justify-content: center;

padding: 20px 20px;
margin-top: 20px;
}

/* bootstrap md devices*/
@media (min-width: 992px) {
.ds-card {
padding: 40px 30px;
}
}

/* bootstrap lg */
@media (min-width: 1200px) {
.ds-card {
margin-top: 0;
}
}
.ds-next-level .ds-card {
text-decoration-line: line-through;
color: rgba(255, 255, 255, 0.5);
}

.ds-second {
position: relative;
padding-bottom: 40px;
}

.ds-title {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #FFFFFF;
margin-bottom: 14px;
}

.ds-text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #92969D;
margin-bottom: 0;
}

.ds-cs {
color: #2DFAD5;
}

.ds-cw {
color: #c31431;
}

.ds-text-white,
.ds-text-white ul li {
font-weight: 500;
font-size: 14px;
line-height: 25px;
color: #FFFFFF;
}

.ds-text-white ul {
margin-left: 10px;
}

.ds-status-next {
position: relative;
width: 153.83px;
height: 46.95px;
background: #333a50;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #FFFFFF;
}
.icons {
font-size: 20px;
display: flex;
align-items: center;
background: #c31431;
padding: 10px;
border-radius: 8px;
}

.spans {
font-size: 16px;
padding: 0px 0px 0 10px;
}
.sctx-text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
.agr {
margin-bottom: 30px;
}
.op-stats.neutral {
background-color: rgb(40 49 65);
border-color: #35405a;
color: #ffffff;
}
.page-item:first-child .page-link {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border: 1px solid #2b2f38;
}
.page-item:last-child .page-link {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border: 1px solid #2b2f38;
}
.pagination {
display: flex;
padding-left: 0;
list-style: none;
border: 1px solid #2b2f38;
border-radius: 50px;
margin-top: 20px;

}
.cloutsy {
margin-top: 60px;
font-size: 35px;
font-weight: 600;
}
.clo {
color: #2dfad5;
}
.badge-dangers {
background: #FF5A5A;
border-radius: 50px;
padding: 14px;
font-size: 16px;
font-weight: 600;
}
.badge-primarys {
background: #00D2AD;
border-radius: 50px;
padding: 14px;
font-size: 16px;
font-weight: 600;
}
.badge-warnings {
background: #FBBC05;
border-radius: 50px;
padding: 14px;
font-size: 16px;
font-weight: 600;
}
.badge-infos {
background: #FF4FD8;
border-radius: 50px;
padding: 14px;
font-size: 16px;
font-weight: 600;
}

nwoCard {
position: relative;
border-radius: 15px;
border: none;
border-color: transparent;
overflow: hidden;
margin-bottom: 30px;
}

@media (min-width: 992px) {
.nwoCard {
margin-bottom: 0;
}
}

.nwoCard .card-body {
position: relative;
z-index: 30;
display: flex;
align-items: center;
gap: 30px;
padding: 20px;
}

@media (min-width: 768px) {
.nwoCard .card-body {
padding: 30px;
}
}

.nwoCard .icon {
background: rgb(255 138 22 / 25%);
width: 66px;
height: 66px;
border-radius: 50%;
color: #c31431;
display: none;
align-items: center;
justify-content: center;
font-size: 35px;
}

.nwoCard .icon-blue {
background: rgb(22 55 255 / 25%);
width: 66px;
height: 66px;
border-radius: 50%;
color: #0d6efd;
display: none;
align-items: center;
justify-content: center;
font-size: 35px;
}

@media (min-width: 768px) {
.nwoCard .icon {
display: flex;
}
}

.nwoCard .title {
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #ffffff;
}

.nwoCard .value {
font-weight: 600;
font-size: 25px;
line-height: 29px;
color: #ffffff;
margin-bottom: 0;
}

.nwoCard-row .col:nth-child(1) .nwoCard {
background: none;
border: 1px solid #2b2f38;background-repeat: no-repeat;background-color: #1e2127;background-size: cover;}

.nwoCard-row .col:nth-child(2) .nwoCard {

border: 1px solid #2b2f38;background: none;
border: 1px solid #2b2f38;
background-repeat: no-repeat;
background-color: #1e2127;
background-size: cover;}

.nwoCard-row .col:nth-child(3) .nwoCard {

border: 1px solid #2b2f38;background: none;
border: 1px solid #2b2f38;
background-repeat: no-repeat;
background-color: #1e2127;
background-size: cover;}

.nwoCard-row .col:nth-child(4) .nwoCard {

background: none;
border: 1px solid #2b2f38;
background-repeat: no-repeat;
background-color: #1e2127;
background-size: cover;}

.nwoCtFlt {
background: #ffffff;
border: 1px solid #ebf2fa;
box-sizing: border-box;
border-radius: 15px;
display: flex;
width: 100%;
outline: none;
align-items: center;
padding: 10px;
gap: 20px;
margin-bottom: 14px;
cursor: pointer;
transition: 0.14s ease;
}

.nwoCtFlt .icon {
background: #0083ff;
border-radius: 50%;
width: 46px;
color: #fff;
height: 46px;
align-items: center;
justify-content: center;
display: flex;
font-size: 30px;
}

.nwoCtFlt .title {
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #0c2447;
}

.nwoCtFlt:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 131, 255, 0.2);
}

.nwoCtFlt.active {
background-color: #e8f3ff;
}

.nwoNav {
background: #ffffff;
border-radius: 30px;
margin: 0;
list-style: none;
padding: 7px 8px;
display: flex;
}

.nwoNav .nwoNavLink {
border: none;
outline: none;
border-radius: 50px;
font-weight: 600;
font-size: 14px;
line-height: 16px;
background-color: transparent;
color: #0c2447;
padding: 11px 25px;
transition: 0.14s ease;
}

.nwoNav .nwoNavLink.active {
background: #0083ff;
color: #ffffff;
}

.nwoTabs .nwoTab {
display: none;
}

.nwoTabs .nwoTab.active {
display: block;
}

.nwoDeIt {
height: 47px;
padding: 0 10px;
display: flex;
align-items: center;
gap: 20px;
background: #f7fafc;
border-radius: 15px;
}

.nwoDeIt.description {
height: auto;
padding: 20px;
}

.nwoDeIt.description .text {
color: #0c2447;
}

@media (min-width: 992px) {
.nwoDeIt.description {
padding: 30px;
}
}

.nwoDeIt .icon {
width: 32px;
height: 32px;
color: #fff;
background-color: #0c2447;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}

.nwoDeIt .text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #393d46;
overflow-wrap: break-word;
max-width: 100%;
}

.s-row {
display: flex;
align-items: center;
gap: 10px;
}

.s-row.s-title {
font-weight: 600;
display: none;
}

@media (min-width: 992px) {
.s-row.s-title {
display: flex;
}
}

.s-col {
flex: 0 0 auto;
}

@media (min-width: 992px) {
.s-col {
flex: 0 0 50px;
width: 50px;
}

.s-col.s-col-sm {
flex: 0 0 70px;
width: 70px;
}

.s-col.s-col-md {
flex: 0 0 100px;
width: 100px;
}

.s-col.s-col-lg {
flex: 0 0 180px;
width: 180px;
}

.s-col.s-title {
flex: 1 0 0;
width: auto;
}
}

.services-wrapper {
display: flex;
flex-wrap: wrap;
width: 100%;
}

.services-wrapper .si-wrapper {
flex: 0 0 auto;
width: 100%;
}

@media (min-width: 768px) {
.services-wrapper .si-wrapper {
flex: 0 0 auto;
width: 50%;
padding-left: 10px;
padding-right: 10px;
}
}

@media (min-width: 992px) {
.services-wrapper {
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}

.services-wrapper .si-wrapper {
width: 100%;
}
}

.service-item {
padding: 20px 20px;
border: 1px solid #2a3f4e;
background: #1e2127;
border-radius: 15px;
margin-bottom: 20px;
}

@media (min-width: 992px) {
.service-item {
padding: 20px 0 !important;
}
}

@media (max-width: 992px) {
.service-item .s-row {
flex-wrap: wrap;
align-items: center;
}

.service-item .btn-fav {
width: 44px;
height: 44px;
border-radius: 8px;
background-color: rgba(255, 90, 165, 0.18);
color: #c31431;
border: 1px solid #c31431;
}

.service-item .s-col-avtime {
width: 100%;
text-align: center;
}

.service-item .s-col-btn {
flex: 1;
}

.service-item .s-col {
padding: 6px 0;
}

.service-item .s-col::before {
content: attr(data-title);
display: block;
padding-bottom: 6px;
font-weight: 600;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}

.service-item .s-col-fav {
order: 100;
}

.service-item .s-col-id {
width: 100%;
text-align: center;
}

.service-item .s-title {
width: 100%;
text-align: center;
}

.service-item .s-col-c {
width: 30%;
text-align: center;
}
}

@media (min-width: 992px) {
.service-item {
border: none;
background-color: none;
}
}

.service-item+.service-item {
border-top: 1px solid #2a3f4e;
}

.sp-serv-title {
font-weight: 600;
font-size: 14px;
line-height: 17px;
}

.sp-serv-sm {
font-weight: 600;
font-size: 16px;
line-height: 17px;
color: #fff;
}

@media (min-width: 992px) {
.sp-serv-sm {
color: #ffffff7f;
font-size: 14px;
}
}

.orlc {
border-radius: 10px;
font-weight: 600;
font-size: 14px;
line-height: 17px;
padding: 10px 10px;
}

.orlc.min {
color: #c31431;
background-color: rgb(255 138 22 / 12%);
}

.orlc.max {
color: #989898;
background-color: rgb(42 47 56);
}

.sp-services .card {
margin-bottom: 30px;
border: none;
background-color: transparent;
}

@media (min-width: 992px) {
.sp-services .card {
border: 1px solid #323843;
background: #1e2127;
}
}

.af-text {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
margin-bottom: 0px;
}

.card-af-top {
margin-bottom: 30px;
}

.af-nav {
background: #292d34;
border-radius: 105px;
display: inline-flex;
flex-wrap: wrap;
padding: 5px;
margin: 0 !important;
}

.af-nav .nav-item {
position: relative;
}

.af-nav .nav-link {
font-weight: 600;
font-size: 14px;
line-height: 16px;
padding: 15px 20px;
color: #ffffff;
border-radius: 100px;
}

.af-nav .nav-link.active {
background-color: #c31431;
}

.af-nav-pay {
display: flex;
margin: 0 0 10px 0 !important;
justify-content: space-between;
gap: 10px;
}

.af-nav-pay .nav-item {
position: relative;
flex: 1;
margin-bottom: 10px;
}

.af-nav-pay .nav-link {
font-weight: 600;
font-weight: 600;
font-size: 12px;
line-height: 15px;
color: #ffffff;
padding: 15px 0px;
width: 100%;
border-radius: 10px;
background: #1e2127;
border: 1px solid #2b2f38;
box-sizing: border-box;
border-radius: 15px;
}

.af-nav-pay .nav-link .icon {
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}

.af-nav-pay .nav-link.active {
background-color: #c31431;
border-color: #c31431;
}

.af-pm-title {
font-weight: 600;
font-size: 25px;
line-height: 25px;
color: #ffffff;
margin-bottom: 14px;
}

.af-pm-about {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #787f8d;
margin-bottom: 30px;
}

.af-pm-text {
font-size: 16px;
line-height: 25px;
color: #ffffff;
}

.af-pm-img {
width: 100px;
}

.af-ph {
background: #293141;
border: 1px solid #333d54;
box-sizing: border-box;
border-radius: 15px;
font-weight: 600;
font-size: 16px;
line-height: 18px;
padding: 20px 24px;
margin-bottom: 14px;
}

.orders-nav-wrapper {
padding-top: 20px;
margin-bottom: 30px;
}

.orders-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
}

.orders-nav-link {
background: #1e2127;
border: 1px solid #393e49;
box-sizing: border-box;
border-radius: 10px;
display: block;
display: flex;
align-items: center;
gap: 10px;
color: #fff;
padding: 10px 20px;
margin-bottom: 10px;
}

.orders-nav-link:focus {
box-shadow: 0 0 0 0.25rem rgb(45 250 213 / 0%);
}

.orders-nav-link.active {
background-color: #c31431;
border-color: #c31431 !important;
color: #ffffff;
}

.orders-nav-link:hover {
background-color: #c31431;
border-color: rgb(237 142 48);
color: #ffffff;
}

@media (min-width: 992px) {
.orders-nav-link {
padding: 10px 13px;
}
}

@media (min-width: 1200px) {
.orders-nav-link {
padding: 11px 15px;
}
}

@media (min-width: 1400px) {
.orders-nav-link {
padding: 14px 18px;
}
}

.orders-nav-link .icon {
font-size: 20px;
display: flex;
align-items: center;
}

.orders-nav-link .text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
}

.op-search-box {
transition: 0.14s ease;
}

.op-search-box:focus-within {
box-shadow: 0 0 0 0.25rem rgba(45, 250, 213, 0.25);
}

.op-search-box:hover {
background: #293142;
border: 1px solid #353f55;
}

.op-search-box .icon {
color: #e0e0e0;
}

.op-search-box input {
transition: 0.14s ease;
background-color: #ffffff00;
border: none;
outline: none;
flex: 1;
color: #fff;
font-weight: 600;
font-size: 14px;
line-height: 16px;
}

.op-search-box input::placeholder {
color: #566676;
}

.op-card {
margin-bottom: 30px;
}

.op-card .op-card--top {
padding-bottom: 30px;
border-bottom: 1px solid #353f55;
}

.op-card .op-card--bottom {
padding-top: 30px;
}

.op-stats {
display: block;
font-weight: 600;
font-size: 14px;
line-height: 20px;
text-align: center;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 15px;
padding: 20px 34px;
}

.op-stats.op-stats-sm {
padding: 16px 30px;
border-color: rgba(255, 255, 255, 0.15) !important;
}

.op-stats.op-stats-btn {
padding: 20px 20px;
display: inline-block;
background: #293142;
border: 1px solid #566676;
color: #566676;
transition: 0.14s ease;
}

.op-stats.op-stats-btn:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.op-stats.op-stats-btn.cs-btn {
font-size: 24px;
margin-bottom: 0;
}

.op-stats.primary {
background-color: rgba(45, 250, 213, 0.15);
border-color: #c31431;
color: #ff9b38;
}

.op-stats.secondary {
background-color: rgba(255, 90, 165, 0.15);
border-color: #c31431;
color: #c31431;
}

.op-stats.info {
background-color: rgba(90, 215, 255, 0.15);
border-color: #5AD7FF;
color: #5AD7FF;
}

.op-stats.warning {
background-color: rgba(237, 126, 88, 0.15);
border-color: #ED7E58;
color: #ED7E58;
}

.op-stats.danger {
background-color: rgba(238, 91, 91, 0.15);
border-color: #EE5B5B;
color: #EE5B5B;
}

.op-stats.danger:focus {
box-shadow: 0 0 0 0.25rem rgba(238, 91, 91, 0.25);
}

.op-service-title {
font-weight: 600;
font-size: 14px;
line-height: 25px;
color: #ffffff;
margin-bottom: 0px;
}

.op-search-box.op-order-link {
display: flex;
width: 100%;
}

.op-search-box.op-order-link .link {
display: block;
width: 100%;
flex: 1 0 0;
font-weight: 500;
font-size: 12px;
line-height: 18px;
color: #637990;
opacity: 0.8;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

.op-date {
font-weight: 600;
font-size: 16px;
line-height: 25px;
color: #566676;
}

.op-date::before {
content: "";
width: 9px;
height: 9px;
background: #9aacbd;
display: inline-block;
border-radius: 50%;
margin-right: 14px;
margin-left: 0px;
display: none;
}

@media (min-width: 992px) {
.op-date::before {
display: block;
}
}

.op-item {
display: flex;
align-items: center;
gap: 8px;
flex-direction: column;
}

@media (min-width: 992px) {
.op-item {
flex-direction: row;
}
}

.op-item .title {
font-size: 16px;
line-height: 18px;
color: #72879d;
}

.op-item .icon {
display: flex;
align-items: center;
font-size: 24px;
color: #fff;
}

.op-item .text {
font-weight: bold;
font-size: 23px;
line-height: 27px;
color: #ffffff;
}

.sc-ticket-card {
padding: 20px;
display: block;
text-decoration: none;
background: #293141;
border: 1px solid #333d54;
box-sizing: border-box;
border-radius: 15px;
transition: 0.14s ease;
margin-bottom: 15px;
}

.sc-ticket-card:hover {
border-color: rgba(45, 250, 213, 0.18);
}

.sc-ticket-card .sctc-title {
margin-top: 6px;
font-weight: 600;
font-size: 13px;
line-height: 15px;
color: #797d89;
}

.sc-ticket-card .sctc-text {
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #ffffff;
}

.sd-head {
padding: 20px 0 30px;
}

.sd-back {
display: block;
padding: 10px 0 12px;
margin: 10px 0;
color: #fff;
position: relative;
display: flex;
align-items: center;
text-decoration: none;
font-weight: 600;
font-size: 16px;
line-height: 20px;
}

.sd-back:hover {
color: #fff;
}

.sd-back:hover::after {
left: -18px;
right: -18px;
}

.sd-back i,
.sd-back span {
position: relative;
z-index: 3;
}

.sd-back::after {
content: "";
height: 2px;
background-color: #2dfad5;
position: absolute;
left: 0;
right: 0;
bottom: 0;
transition: 0.14s ease;
}

.sd-tid {
display: flex;
align-items: center;
gap: 30px;
}

.sd-tid .title {
font-weight: 600;
font-size: 25px;
line-height: 31px;
margin: 0px;
}

.sd-tid .tid {
display: block;
background: rgba(255, 90, 165, 0.15);
border-radius: 10px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #c31431;
padding: 14px 30px;
}

.tc-tdet-title {
font-weight: 600;
font-size: 25px;
line-height: 31px;
margin-bottom: 0px;
}

.tc-tick-id {
background-color: #2dfad5;
color: #fff;
border-radius: 10px;
font-size: 16px;
line-height: 20px;
padding: 10px 28px;
}

.tc-ti-title {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #72879d;
margin-bottom: 0px;
}

.tc-ti-text {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #fff;
}

.card.tc-ti-box {
background-image: none;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
}

.card.tc-ti-box .card-body {
padding: 20px;
}

@media (min-width: 768px) {
.card.tc-ti-box .card-body {
padding: 24px;
}
}

@media (min-width: 992px) {
.card.tc-ti-box .card-body {
padding: 42px 33px;
}
}

@media (min-width: 1400px) {
.card.tc-ti-box .card-body {
padding: 50px 38px;
}
}

.card.tc-ti-box .title {
font-weight: 600;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
}

.card.tc-ti-box .text {
font-size: 14px;
line-height: 18px;
letter-spacing: -0.04em;
color: #7e96ad;
}

.card.tc-ti-box .text p {
margin-bottom: 28px;
}

.card.tc-ti-box .elnao7-mark {
font-weight: 600;
font-size: 25px;
line-height: 29px;
letter-spacing: -0.04em;
}

.ticket-message-block {
display: flex;
}

.ticket-message-block.ticket-message-left+.ticket-message-left {
margin-top: -50px;
}

.ticket-message-block.ticket-message-right+.ticket-message-right {
margin-top: -50px;
}

.ticket-message-block.ticket-message-right {
justify-content: flex-end;
}

.ticket-message-block.ticket-message-right .ticket-msg-container {
text-align: right;
}

.ticket-message-block.ticket-message-right .ticket-msg-container .ticket-msg {
background: #39445c;
border-radius: 20px 20px 0 20px;
}

.ticket-message-block.ticket-message-left .ticket-msg-container .ticket-msg {
border-radius: 20px 20px 20px 0px;
}

.ticket-message-block .ticket-msg-container {
width: 100%;
max-width: 400px;
}

.ticket-message-block .ticket-msg-container .ticket-msg {
background: #c31431;
border-radius: 30px;
padding: 14px 26px;
display: inline-flex;
margin-bottom: 12px;
font-weight: 500;
font-size: 13px;
line-height: 22px;
letter-spacing: 0.3px;
color: #fff;
}

.ticket-message-block .ticket-msg-container .date-time {
font-size: 12px;
line-height: 15px;
color: #747886;
margin-bottom: 30px;
padding: 0 10px;
opacity: 0;
display: block;
}

.ticket-message-right~.ticket-message-right .ticket-msg-container .date-time {
opacity: 0;
}

.ticket-message-left~.ticket-message-right .ticket-msg-container .date-time {
opacity: 1;
}

.ticket-message-left~.ticket-message-left .ticket-msg-container .date-time {
opacity: 0;
}

.ticket-message-right~.ticket-message-left .ticket-msg-container .date-time {
opacity: 1;
}

.schat-body .schat-chat-body {
max-height: 553px;
overflow-y: auto;
}

.schat-body .schat-chat-body::-webkit-scrollbar {
width: 6px;
border-radius: 3px;
}

.schat-body .schat-chat-body::-webkit-scrollbar-track {
background: #252c3b;
border-radius: 3px;
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb {
background: #3e4553;
border-radius: 3px;
transition: 0.14s ease;
}

.schat-body .schat-chat-body::-webkit-scrollbar-thumb:hover {
background: #606778;
}

.schat-body .schat-input {
padding-top: 10px;
}

.schat-msg-input {
position: relative;
display: flex;
background-color: rgba(57, 68, 92, 0.5);
border-radius: 10px;
height: 70px;
align-items: center;
}

.schat-msg-input input {
border: none;
outline: none;
background: transparent;
flex: 1;
padding: 0 30px;
color: #fff;
font-size: 14px;
line-height: 17px;
color: #acacac;
}

a {
color: #c31431;
transition: 0.14s ease;
text-decoration: none;
}

a:hover {
color: #19b7e7;
text-decoration: underlin;
}

.payments-table {
width: 100%;
}

.payments-table tr {
background: #f9f9f9;
border-radius: 10px;
padding: 12px 14px;
display: block;
display: flex;
align-items: center;
margin: 0 -10px;
justify-content: space-between;
margin-bottom: 14px;
}

.payments-table tr>td {
padding: 0 10px;
}

.payments-table .pyt-id {
background: #21c5fb;
border-radius: 7px;
color: #fff;
padding: 12px 24px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
}

.payments-table .pyt-title {
font-weight: bold;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
}

.payments-table .pyt-text {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #21c5fb;
margin-bottom: 0px;
}

.btn.sd-send-btn {
box-shadow: none;
display: flex;
align-items: center;
}

.cp-sns-title {
font-weight: 600;
font-size: 19px;
line-height: 23px;
color: #ffffff;
margin-bottom: 30px;
}

.cp-sns-dns {
background: #c31431;
border-radius: 10px;
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
background-color: #c31431;
padding: 24px 20px;
text-align: center;
margin-bottom: 20px;
}

.cp-right-box {
height: 100%;
position: relative;
overflow: hidden;
}

.cp-right-box .cp-r-img {
position: absolute;
z-index: 1;
right: 0px;
bottom: 0px;
top: 0px;
width: 100%;
background-image: url(https://cdn.smmspot.net/cloutsy/assets/img/cp-img.png);
background-repeat: no-repeat;
background-position: right bottom;
background-size: auto 80%;
}

.cp-right-box .card-body {
position: relative;
z-index: 4;
display: flex;
flex-direction: column;
justify-content: center;
}

.cp-right-box .cp-r-title {
font-weight: 600;
font-size: 25px;
margin-left: 25px;line-height: 31px;
}

.cp-right-box .cp-r-text {
margin-top: 6px;
font-size: 16px;
line-height: 20px;
color: #a2a4a9;
width: 100%;
}

@media (min-width: 992px) {
.cp-right-box .cp-r-text {
max-width: 50%;
margin-left: 25px;}
}

.cp-top {
margin-bottom: 30px;
}

.cp-exclamation {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #252C3B;
background-color: #EE5B5B;
font-size: 12px;
font-weight: 700;
}

.aq {
position: relative;
}

.aq .aq-item {
background: #1e2127;
border: 1px solid #2b2f38;
border-radius: 10px;
transition: 0.32s cubic-bezier(0.17, 0.67, 0.71, 1.34);
margin-bottom: 20px;
}

.aq .aq-item:focus-within {
box-shadow: 0 0 0 0.25rem rgba(103, 103, 103, 0.16);
}

.aq .aq-item .aq-content {
padding: 0px 26px 0px;
overflow: hidden;
max-height: 0px;
transition: 0.32s ease;
}

.aq .aq-item .i-1 {
display: block;
}

.aq .aq-item .i-2 {
display: none;
}

.aq .aq-item.active .i-1 {
display: none;
}

.aq .aq-item.active .i-2 {
display: block;
}

.aq .aq-item.active .aq-content {
padding: 8px 26px 24px;
max-height: 1000px;
}

.aq .aq-btn {
width: 100%;
display: block;
font-size: 16px;
line-height: 20px;
display: flex;
color: #fff;
align-items: center;
padding: 24px 0px;
border: none;
outline: none;
background-color: transparent;
}

.aq .aq-btn .aq-btn-text {
font-weight: 600;
padding-left: 20px;
text-align: left;
}

.aq .aq-btn .aq-btn-right {
color: #fff;
font-size: 20px;
margin-left: auto;
width: 72px;
opacity: 0.6;
}

.afp-ftext {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
}

.afp-top {
margin-bottom: 30px;
}

.aft-item {
display: flex;
gap: 17px;
align-items: center;
margin: 5px 0;
}

.aft-item .title {
font-weight: 600;
font-size: 14px;
line-height: 18px;
color: #4e5d7c;
margin-bottom: 4px;
}

.aft-item .text {
font-weight: 600;
font-size: 16px;
line-height: 22px;
color: #ffffff;
}

.aft-box-row {
margin: 0 -8px -10px;
}

.aft-box-row>.col {
padding: 0 8px;
}

.aft-box-row>.col:nth-child(1n) .aft-box::after {
background-color: #c3143100;
}

.aft-box-row>.col:nth-child(2n) .aft-box::after {
background-color: #2dfad500;
}

.aft-box-row>.col:nth-child(3n) .aft-box::after {
background-color: #ed7e5800;
}

.aft-box-row>.col:nth-child(4n) .aft-box::after {
background-color: #2dfad500;
}

.aft-box-row>.col:nth-child(5n) .aft-box::after {
background-color: #26262600;
}

.aft-box-row>.col:nth-child(6n) .aft-box::after {
background-color: #ee5b5b00;
}

.aft-box {
background: #23272e;
border-radius: 10px;
padding: 20px;
position: relative;
overflow: hidden;
border: 1px solid #373d48;margin-bottom: 16px;
}

.aft-box .title {
font-weight: 600;
font-size: 14px;
line-height: 17px;
color: #ffffff;
}

.aft-box .text {
font-weight: 600;
font-size: 25px;
line-height: 25px;
color: #ffffff;
}

.aft-box:hover::after {
height: 10px;
}

.aft-box::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 5px;
background-color: #fff;
transition: 0.14s ease;
}

.acc-switch {
display: flex;
background: #272b32;
border-radius: 100px;
border: 1px solid #3a3f4a !important;height: 62px;
padding: 8px;
outline: none;
border: none;
min-width: 122px;
align-items: center;
justify-content: center;
gap: 8px;
position: relative;
transition: 0.14s ease;
}

.acc-switch:focus {
box-shadow: 0 0 0 0.25rem rgb(255 90 165 / 0%);
}

.acc-switch.gs-female .acc-switch-bg {
left: 50%;
}

.acc-switch .acc-switch-bg {
position: absolute;
z-index: 3;
border-radius: 30px;
background-color: #c31431;
left: 8px;
width: calc(50% - 8px);
top: 8px;
bottom: 8px;
transition: 0.2s ease;
}

.acc-switch .btn-gender {
position: relative;
z-index: 5;
outline: none;
border: none;
background-color: transparent;
width: calc(50% - 8px);
font-size: 18px;
line-height: 16px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}

.acc-user {
display: flex;
align-items: center;
gap: 16px;
}

.acc-user .acc-avatar {
height: 74px;
width: 74px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
border: 3px solid #2dfad5;
}

.acc-user .acc-avatar img {
width: calc(100% - 6px);
height: calc(100% - 6px);
border-radius: 50%;
object-fit: cover;
}

.acc-user .acc-username {
font-weight: 600;
font-size: 19px;
line-height: 23px;
color: #ffffff;
}

.acc-user .acc-mail {
font-size: 16px;
line-height: 19px;
color: #4e5d7c;
}

.acc-card-left {
display: flex;
justify-content: center;
height: 100%;
}

.acc-card-left .card-body {
display: flex;
align-items: center;
width: 100%;
}

.acc-card-left .card-body .row {
width: calc(100% + 30px);
}

.acc-api {
display: flex;
padding: 16px 18px 16px 22px;
background: rgba(45, 250, 213, 0.25);
border-radius: 15px;
color: #2dfad5;
align-items: center;
}

.acc-api .acc-api-key {
font-weight: 600;
font-size: 14px;
line-height: 17px;
text-align: center;
color: #2dfad5;
}

.acc-api a {
margin-left: auto;
font-size: 24px;
line-height: 1;
}

.blog-page .dashboard-head-wrapper {
padding-top: 100px;
}

@media (min-width: 992px) {
.blog-page .dashboard-head-wrapper .text {
width: 64%;
}
}

.blog-page .dashboard-head-wrapper .r-image {
position: absolute;
right: 30px;
bottom: 0px;
}

.bp-blogs-wrapper {
padding: 0 0 80px;
}

.blog-head {
padding: 30px;
display: flex;
align-items: center;
gap: 16px;
}

.blog-head .blog-avatar {
width: 50px;
height: 50px;
border: 2px solid #c31431;
border-radius: 50%;
overflow: hidden;
}

.blog-head .blog-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.blog-head .blog-head--username {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #ffffff;
margin-bottom: 4px;
}

.blog-head .blog-head--site {
font-weight: 600;
font-size: 12px;
line-height: 14px;
color: #92969d;
}

.card-blog {
margin-bottom: 30px;
}

.card-blog .blog-img-wrapper {
overflow: hidden;
position: relative;
padding-top: 48%;
}

.card-blog .blog-img-wrapper img {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
object-fit: cover;
}

.card-blog .blog-title {
padding: 30px;
}

.card-blog .blog-title h2 {
margin-bottom: 0;
font-weight: 600;
font-size: 25px;
line-height: 29px;
}

.card-blog .blog-content {
padding: 30px;
font-size: 14px;
line-height: 21px;
color: #92969d;
}

.card-blog .blog-footer {
padding: 30px;
}

.card-blog .blog-read-more {
font-size: 16px;
line-height: 14px;
letter-spacing: -0.02em;
color: #ffffff;
display: flex;
align-items: center;
}

.card-blog .blog-read-more:hover {
color: #2dfad5;
}

.card-blog .blog-read-more i {
display: flex;
align-items: center;
justify-content: center;
}

.card-blog .blog-read-more span {
font-weight: 600;
}

.blog-border {
position: relative;
}

.blog-border::after {
content: "";
position: absolute;
bottom: 0;
left: 30px;
right: 30px;
height: 1px;
background: #2d3138;
}

.blog-share-wrapper {
display: flex;
gap: 10px;
}

.blog-share-btn {
display: inline-block;
background: #c31431;
border: 1px solid #374462;
box-sizing: border-box;
border-radius: 100px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: 0.14s ease;
}

.blog-share-btn i {
transition: 0.14s ease;
}

.blog-share-btn:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
}

.blog-share-btn:hover {
color: #fff;
}

.blog-share-btn:hover i {
transform: scale(1.2);
}

.bi-head-wrapper {
padding: 30px 0;
}

.bi-head-box {
background: #19202a;
border: 1px solid #353f55;
box-sizing: border-box;
border-radius: 35px;
position: relative;
}

.bi-head-box .bi-head-bg {
position: absolute;
left: 0;
top: 0;
border-radius: 35px;
width: 100%;
height: 100%;
overflow: hidden;
opacity: 0.15;
}

.bi-head-box .bi-head-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}

.bi-head-box .bi-head-content {
position: relative;
z-index: 5;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

@media (min-width: 992px) {
.bi-head-box .bi-head-content {
padding: 90px 30px;
}
}

.bi-head-box .bi-head-content .bi-cat-wrapper {
display: flex;
justify-content: center;
padding-bottom: 30px;
}

.bi-head-box .bi-head-content .bi-cat-wrapper .bi-cat {
display: inline-block;
background: #c31431;
border: 1px solid #faac5e;
box-sizing: border-box;
color: #ffffff;
border-radius: 50px;
font-weight: 600;
font-size: 16px;
line-height: 18px;
letter-spacing: -0.04em;
padding: 15px 45px;
}

.bi-head-box .bi-head-content .bi-title h1 {
font-weight: 600;
font-size: 35px;
line-height: 40px;
}

.bi-head-box .bi-head-content .user-wrapper {
display: flex;
align-items: center;
justify-content: center;
}

.bi-head-box .bi-head-content .user-wrapper .blog-head {
padding: 24px 0 0 0;
}

.bi-service-category {
padding: 0 0 30px 0;
}

.bi-service-category .bi-s-title {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #ffffff;
}

.bi-service-category .bi-s-text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #92969d;
margin: 0;
}

.blog-content {
padding-bottom: 30px;
}

.bi-content {
font-weight: 600;
font-size: 16px;
line-height: 20px;
color: #ffffff;
}

.bi-content strong {
color: #fff;
}

.bi-content img,
.bi-content table {
max-width: 100%;
}

.bi-share-section {
padding-bottom: 30px;
}

.bi-share-section .blog-share-wrapper {
justify-content: space-between;
}

@media (min-width: 768px) {
.bi-share-section .blog-share-wrapper {
justify-content: flex-start;
gap: 30px;
}

.bi-share-section .blog-share-wrapper .blog-share-btn {
position: relative;
}

.bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
content: "";
position: absolute;
left: -15px;
height: calc(100% + 48px);
top: 50%;
transform: translateY(-50%);
width: 1px;
background-color: #2a3f4e;
}
}

@media (min-width: 992px) {
.bi-share-section .blog-share-wrapper {
gap: 50px;
}

.bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
left: -25px;
}
}

@media (min-width: 1400px) {
.bi-share-section .blog-share-wrapper {
gap: 80px;
}

.bi-share-section .blog-share-wrapper .blog-share-btn+.blog-share-btn::before {
left: -40px;
}
}

.bi-about-cloutsy {
padding-bottom: 30px;
}

.bi-about-cloutsy .bi-about-avatar {
width: 72px;
height: 72px;
border: 2px solid #2dfad5;
box-sizing: border-box;
border-radius: 50%;
overflow: hidden;
}

.bi-about-cloutsy .bi-about-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}

.bi-about-cloutsy .bia-title {
font-weight: 600;
font-size: 25px;
line-height: 29px;
color: #ffffff;
}

.bi-about-cloutsy .bia-text {
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
margin: 0;
}

.api-page #PageTitle {
display: block;
font-weight: 600;
font-size: 35px;
line-height: 30px;
}

.api-page p {
margin-bottom: 0;
font-size: 16px;
line-height: 22px;
color: #92969d;
}

.api-page h6 {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #ffffff;
}

.api-title-section {
padding: 60px 0 30px;
}

.api-title {
font-size: 19px;
line-height: 22px;
color: #ffffff;
}

.api-text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #92969d;
}

.api-section {
padding: 0 0 30px;
}

.api-section .card-header .api-title {
margin-bottom: 0;
}

@media (min-width: 992px) {

.api-section .card .card-body,
.api-section .code.card-body {
padding: 40px;
}
}

.api-section .card-body .row {
margin-bottom: -2rem;
}

.api-section .code {
color: rgba(255, 255, 255, 0.6);
}

.register-page {
position: relative;
min-height: 100vh;
padding: 40px 0;
display: flex;
align-items: center;
}

.register-page::before {
content: "";
position: absolute;
left: 0px;
width: 50%;
bottom: 0px;
top: 0px;
background-repeat: no-repeat;
background-size: cover;
background-position: right center;
}

@media (min-width: 768px) {
.register-page::before {
background-image: none;
border: 1px solid #232630;}
}

.register-page .testi-card {
margin-bottom: 0px;
padding-bottom: 0px;
}

.register-page .testi-card .tc-content {
border: none !important;
margin-bottom: 0px;
padding-bottom: 0px;
}

.register-page .testi-card .tc-text {
margin: 0 !important;
}

.register-page .sd-back::after {
opacity: 0;
}

.rp-content {
width: 100%;
position: relative;
z-index: 10;
}

.rp-left-title {
font-weight: 600;
font-size: 35px;
line-height: 40px;
letter-spacing: -0.04em;
margin-top: 36px;
margin-bottom: 24px;
background: linear-gradient(89.31deg, rgb(255 138 22 / 28%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.rp-left-text {
font-size: 16px;
line-height: 24px;
letter-spacing: -0.04em;
color: #ffffff42;
margin-bottom: 60px;
}

.rp-left-s-title {
font-weight: 600;
font-size: 25px;
line-height: 29px;
letter-spacing: -0.04em;
background: linear-gradient(89.31deg, rgb(255 138 22 / 26%) 4.55%, rgba(255, 255, 255, 0) 69.39%), linear-gradient(0deg,
#ffffff, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}

.rp-icon {
background: rgba(45, 250, 213, 0.26);
color: #2dfad5;
font-size: 24px;
border-radius: 16px;
width: 56px;
height: 56px;
display: inline-block;
display: flex;
align-items: center;
justify-content: center;
}

.rp-sign-up-title {
font-weight: 600;
font-size: 24.226px;
line-height: 28px;
letter-spacing: -0.04em;
color: #ffffff;
}
/** actulus */

.select-container {
position: relative;
width: 100%;
}

.select-container.open .select-options-wrapper {
display: flex;
}

.select-container.open .select-arrow {
transform: rotate(180deg);
}

.select-button {
width: 100%;
display: flex;
align-items: center;
padding: 10px 20px;
cursor: pointer;
background-color: transparent;
transition: 0.14s ease;
outline: none;
line-height: 20px;
background: #292d34;
border: 1px solid #3a3f49;
box-sizing: border-box;
border-radius: 15px;
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #ffffff;
padding: 20px 25px;
}

.select-button:focus {
box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.1);
}

.selected-text {
font-size: 16px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}

.select-arrow {
position: absolute;
right: 14px;
top: 0px;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
transition: 0.14s ease;
}

.select-options-wrapper {
border-radius: 20px;
position: absolute;
z-index: 6;
display: none;
align-items: center;
flex-direction: column;
transition: 0.14s ease;
background: #292d34;
border: 1px solid #30333c;
top: 70px;
width: 100%;
}

.select-options {
position: relative;
width: 100%;
margin: 0;
padding: 10px 8px;
display: flex;
gap: 2px;
flex-direction: column;
max-height: 340px;
overflow-y: auto;
}
.select-options::-webkit-scrollbar {
width: 6px;
}

/* Track */
.select-options::-webkit-scrollbar-track {
background: #2e384c;
border-radius: 3px;
}

/* Handle */
.select-options::-webkit-scrollbar-thumb {
background: #3b4456;
border-radius: 3px;
}

/* Handle on hover */
.select-options::-webkit-scrollbar-thumb:hover {
background: #434e64;
}

.select-option {
display: block;
font-weight: 600;
padding: 8px 12px;
border-radius: 10px;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
text-align: left;
color: #7c7c7c;
}

.select-option:hover,
.select-option:focus {
background-color: rgba(255, 255, 255, 0.1);
}

.select-option.active {
color: #fff;
}

.search-container {
width: 100%;
padding: 10px 10px 3px;
}

.search-input {
width: 100%;
border: 1px solid #eee;
border-radius: 4px;
height: 38px;
padding: 0 14px;
outline: none;
}

.search-input:focus {
box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.1);
}

.form-group {
margin-bottom: 1.5rem !important;
}

.modal-content {
background: #252c3b;
border-radius: 15px;
border: 1px solid #3e5566;
}

.modal-title {
line-height: 1.3;
font-size: 19px;
font-weight: 600;
}

.modal-header {
border-bottom: 1px solid #648ab04a;
}

.modal-body {
color: rgba(255, 255, 255, .6);
padding-top: 30px;
line-height: 1.3;
}

.ticket-response {
margin-bottom: 20px;
display: none;
}

.ticket-response.active {
display: block;
}
.alert.alert-success {
color: #09b797;
background: #2dfad431;
}

.alert.alert-danger {
color: #EE5B5B;
background: #ee5b5b41;
}

.alert .close {
position: absolute;
right: 20px;
top: 13px;
outline: none;
background-color: transparent;
border: none;
font-size: 20px;
color: #fff;
}

.pagination li.active .page-link {
background-color: #1e2127;
color: #c31431;
}

.pagination li.active .page-link::before {
content: "";
bottom: 0px;
height: 3px;
width: 14px;
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: #c31431;
}

.pagination li.page-item-before .page-link {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
font-weight: 400;
}

.pagination li.page-item-next .page-link {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
font-weight: 400;
}

.pagination li .page-link {
border: none;
margin: 0;
height: 50px;
padding: 0px;
min-width: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 17.3005px;
line-height: 18px;
color: #989898;
position: relative;
background-color: #1e2127;
}

.pagination li .page-link:focus {
z-index: 2;
}

.bootstrap-datetimepicker-widget {
color: #fff;
}

.bootstrap-datetimepicker-widget .list-unstyled {
padding: 14px;
}

.bootstrap-datetimepicker-widget .day:hover {
background-color: rgba(255, 255, 255, 0.117) !important;
}

.bootstrap-datetimepicker-widget .picker-switch:hover,
.bootstrap-datetimepicker-widget .prev:hover,
.bootstrap-datetimepicker-widget .next:hover {
background-color: rgba(255, 255, 255, 0.117) !important;

}

/**
* player
*/

.sidebar-player {
background-color: rgba(255, 255, 255, 0.03);
padding: 10px;
width: 100%;
}

.sidebar-player .control-wrapper {
margin: 4px -6px 0;
display: flex;
align-items: center;
gap: 6px;
}

.sidebar-player .control-btn {
outline: none;
border: none;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: rgba(255, 255, 255, 0.769);
background-color: transparent;
border-radius: 50%;
}

.sidebar-player .control-btn:hover {
background-color: rgba(255, 255, 255, 0.04);
}

.sidebar-player .control-btn .i-pause {
display: none;
}

.sidebar-player .a-of-total {
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
}

.sidebar-player.playing .album-cover {
animation: rotating 10s linear infinite;
}

.sidebar-player.playing .control-btn .i-play {
display: none;
}

.sidebar-player.playing .control-btn .i-pause {
display: flex;
}

.player-content {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 1;
width: 100%;
}

.album-cover {
width: 44px;
height: 44px;
border-radius: 50%;
transition: 0.14s ease;
}

.album-cover img {
object-fit: cover;
max-width: 100%;
height: 100%;
border-radius: 50%;
}

.player-right {
flex: 1;
}

.player-right .song-name {
font-size: 13px;
color: rgba(255, 255, 255, 0.7);
font-weight: 600;
margin-bottom: 0px;
}

.control-btn .i-off {
display: flex;
}

.control-btn .i-on {
display: none;
}

.control-btn.enabled .i-off {
display: none;
}

.control-btn.enabled .i-on {
display: flex;
}

@keyframes rotating {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}

.nwo-video {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .75);
z-index: 3000;
display: none;
}

.nwo-video.active {
display: block;
}

.nwo-video-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 700px;
width: 100%;
}

.nwo-video-wrapper {
position: relative;
padding-top: 56.25%;
width: 100%;
border-radius: 20px;
}

.nwo-video-wrapper iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

.nwo-video-close {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -65px;
background-color: #262626;
color: #77b6ab;
height: 50px;
font-size: 16px;
font-weight: 600;
outline: none;
border: none;
padding: 0 20px;
border-radius: 25px;
transition: .14s ease;
}

.nwo-video-close:hover {
color: #2dfad5;
}

.op-card--bottom-close {
display: none;
}

@media (max-width: 768px) {
.op-card .op-card--top {
border-color: transparent;
padding-bottom: 0px;
}

.op-stats {
padding: 13px 23px;
}

.op-stats.op-id {
background-color: transparent;
border: none;
padding: 0px;
}
.op-card .op-card--bottom {
position: fixed;
bottom: -1px;
background: #262c3b;
left: 0px;
right: 0px;
max-height: 80vh;
border-radius: 25px 25px 0 0;
z-index: 2000;
padding-bottom: 30px;
padding-top: 64px;
overflow-y: auto;
box-sizing: border-box;
box-shadow: 0 -4px 41px rgba(0, 0, 0, .5);
padding-left: 12px;
padding-right: 12px;
display: none;
transform: translateY(110%);
}

.op-card--bottom-close {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
position: absolute;
right: 10px;
top: 9px;
background-color: rgb(39, 200, 255, .18);
color: rgba(39, 200, 255, 1);
border: none;
outline: none;
}
}

.sp-modal {
position: fixed;
z-index: 2020;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .7);
display: none;
align-items: center;
justify-content: center;
}

.sp-modal.active {
display: flex;
}

@media (min-width: 768px) {
.sp-modal {
padding: 30px 0;
overflow-y: auto;
}
}

.sp-modal-card {
background: #1e2127;
box-sizing: border-box;
position: fixed;
z-index: 2021;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: flex;
flex-direction: column;
}

@media (min-width: 768px) {
.sp-modal-card {
left: initial;
right: initial;
top: initial;
bottom: initial;
border-radius: 25px;
max-width: 600px;
width: 100%;
position: relative;
border: 1px solid #2d3139;
max-height: calc(100vh - 80px);
}
}

.sp-modal-header {
background-image: none;
background-size: cover;
background-position: center;
padding: 22px 20px 16px;
position: relative;
z-index: 2030;
text-align: center;
}

@media (min-width: 768px) {
.sp-modal-header {
padding: 64px 30px 100px;
border-radius: 25px 25px 0 0;
}
}

.sp-modal-service-id {
background: #c3143126;
border-radius: 15px;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #c31431;
padding: 14px 22px;
display: inline-block;
margin-bottom: 22px;
}

.sp-modal-service-title {
font-weight: 600;
font-size: 25px;
line-height: 30px;
text-align: center;
color: #fff;
}

.sp-modal-body {
position: relative;
z-index: 2040;
padding: 30px;
flex: 1;
overflow-y: auto;
}

@media (min-width: 768px) {
.sp-modal-body {
margin-top: -64px;
padding: 0 30px 30px;
flex: inherit;
overflow: inherit;
}

.sp-modal-body-card {
background: #1e2127;
border: 1px solid #3a3f49;
box-sizing: border-box;
border-radius: 15px;
padding: 28px;
margin-bottom: 22px;
}
}

.sp-modal-body-card {
margin-bottom: 22px;
}

.sp-modal-close {
border-radius: 50%;
width: 52px;
height: 52px;
border: none;
outline: none;
background: transparent;
position: absolute;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
top: 20px;
right: 20px;
z-index: 2050;
font-size: 24px;
}

.mobile-navbar {
position: fixed;
z-index: 1031;
left: 0px;
right: 0px;
bottom: 0px;
height: 56px;
border-top: 1px solid;
background-color: #252c3b;
border-color: #313949;
padding: 0 10px;
}

.mobile-navbar-content {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-around;
}

.mnc-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
color: #797d89;
}

.mnc-item.active {
color: #fff;
}

.mnc-item-icon {
font-size: 20px;
margin-bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
height: 30px;
}

.mnc-item-text {
font-size: 12px;
font-weight: 500;
}

@media (min-width: 768px) {
.mobile-navbar {
display: none;
opacity: 0;
transform: translateY(100%);
}
}

.table {
--bs-table-bg: transparent;
--bs-table-accent-bg: transparent;
--bs-table-striped-color: #212529;
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
--bs-table-active-color: #212529;
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: #212529;
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
width: 100%;
margin-bottom: 1rem;
color: #ffffff;
vertical-align: top;
border-color: #dee2e6;
}
.ds-first {
position: relative;
padding-bottom: 40px;
}

.ds-first-card {
background: url(https://storage.perfectcdn.com/fsvxaw/lw7fcug44echc8om.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.ds-status {
position: relative;
width: 153.83px;
height: 46.95px;

background: #c31431;
border-radius: 50px;

display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #FFFFFF;
}
.ds-level-text {
font-weight: 600;
font-size: 35px;
line-height: 30px;
letter-spacing: -0.005em;
color: #FFFFFF;
margin-top: 20px;
}

.ds-card {
background: #293142;
border: 1px solid #313949;
border-radius: 15px;

font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #FFFFFF;

display: flex;
text-align: center;
justify-content: center;

padding: 20px 20px;
margin-top: 20px;
}

/* bootstrap md devices*/
@media (min-width: 992px) {
.ds-card {
padding: 40px 30px;
}
}

/* bootstrap lg */
@media (min-width: 1200px) {
.ds-card {
margin-top: 0;
}
}
.ds-next-level .ds-card {
text-decoration-line: line-through;
color: rgba(255, 255, 255, 0.5);
}

.ds-second {
position: relative;
padding-bottom: 40px;
}

.ds-title {
font-weight: 600;
font-size: 19px;
line-height: 22px;
color: #FFFFFF;
margin-bottom: 14px;
}

.ds-text {
font-weight: 600;
font-size: 14px;
line-height: 16px;
color: #92969D;
margin-bottom: 0;
}

.ds-cs {
color: #2DFAD5;
}

.ds-cw {
color: #c31431;
}

.ds-text-white,
.ds-text-white ul li {
font-weight: 500;
font-size: 14px;
line-height: 25px;
color: #FFFFFF;
}

.ds-text-white ul {
margin-left: 10px;
}

.ds-status-next {
position: relative;
width: 153.83px;
height: 46.95px;
background: #333a50;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 16px;
line-height: 18px;
color: #FFFFFF;
}
.icons {
font-size: 20px;
display: flex;
align-items: center;
background: #c31431;
padding: 10px;
border-radius: 8px;
}

.spans {
font-size: 16px;
padding: 0px 0px 0 10px;
}
.sctx-text {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
.agr {
margin-bottom: 30px;
}
.op-stats.neutral {
background-color: rgb(40 49 65);
border-color: #35405a;
color: #ffffff;
}
.page-item:first-child .page-link {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border: 1px solid #2b2f38;
}
.page-item:last-child .page-link {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border: 1px solid #2b2f38;
}
.pagination {
display: flex;
padding-left: 0;
list-style: none;
border: 1px solid #2b2f38;
border-radius: 50px;
margin-top: 20px;

}

/* ========== Hamburger Icon Styles - Now unified with .sidebar-toggle.ham-icon ========== */
/* All ham-icon specific styles are now handled by .sidebar-toggle.ham-icon above */
/* This ensures smooth, consistent behavior across all devices */

/* ================================================================
🎨 MOBILE DARK THEME FIX - Professional UI/UX
================================================================
แก้ไขปัญหาพื้นหลังสีขาวบนมือถือ Chrome
ออกแบบโดย Professional UI/UX Designer
================================================================ */

/* ============ Global Mobile Dark Theme ============ */
/* ใช้ทั้ง max-width และ orientation เพื่อให้ทำงานแม้เมื่อ zoom */
@media (max-width: 768px), (orientation: portrait) and (max-device-width: 768px) {

/* พื้นหลังหลัก - Dark Gradient สวยงาม */
html, body {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-attachment: fixed !important;
color: #ffffff !important;
min-height: 100vh !important;
}

/* ป้องกัน white background เมื่อ zoom */
html, body, * {
background-color: transparent !important;
}

/* Force dark background - ไม่ให้เปลี่ยนเป็นสีขาวเมื่อ zoom */
html {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
}

body {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
}

/* App Content - Dark Background */
.app-content,
.dashboard-root,
.dashboard-root .app-content {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
}

/* Container - Dark Background */
.container,
.container-fluid {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
}

/* ============ Cards & Panels ============ */

/* Card - Modern Glass Morphism Effect */
.card {
background: rgba(30, 32, 40, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 1px rgba(255, 255, 255, 0.1) inset !important;
color: #ffffff !important;
}

.card-border {
background: rgba(30, 32, 40, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.4),
0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.card-header {
background: rgba(40, 44, 52, 0.8) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}

.card-body {
background: transparent !important;
color: #ffffff !important;
}

/* ============ Forms & Inputs ============ */

/* Form Control - Modern Dark Input (No Bounce) */
/* ยกเว้น .charge-input เพื่อไม่ให้ขัดแย้งกับการแสดงผลราคา */
.form-control:not(.charge-input),
.form-select:not(.charge-input),
input[type="text"]:not(.charge-input),
input[type="password"]:not(.charge-input),
input[type="email"]:not(.charge-input),
input[type="number"]:not(.charge-input),
textarea:not(.charge-input),
select:not(.charge-input) {
background: linear-gradient(135deg, rgba(40, 44, 52, 0.95) 0%, rgba(30, 32, 40, 0.95) 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
color: #ffffff !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 16px 20px !important;
font-size: 16px !important;
font-weight: 500 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important; /* ลด transition */
}

.form-control:not(.charge-input)::placeholder,
.form-select:not(.charge-input)::placeholder,
input:not(.charge-input)::placeholder,
textarea:not(.charge-input)::placeholder {
color: rgba(255, 255, 255, 0.5) !important;
}

/* Focus State - Premium Glow Effect (No Bounce) */
/* ยกเว้น .charge-input เพื่อไม่ให้ขัดแย้งกับการแสดงผลราคา */
.form-control:not(.charge-input):focus,
.form-select:not(.charge-input):focus,
input:not(.charge-input):focus,
textarea:not(.charge-input):focus,
select:not(.charge-input):focus {
background: linear-gradient(135deg, rgba(50, 54, 62, 0.95) 0%, rgba(40, 44, 52, 0.95) 100%) !important;
border-color: #4caf50 !important;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* รวม box-shadow
เป็นบรรทัดเดียว */
/* ลบ transform ที่ทำให้เกิด bounce */
transform: none !important;
-webkit-transform: none !important;
outline: none !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important; /* transition เร็วขึ้น */
}

/* Form Labels - Clear White Text */
.form-label,
label,
.control-label {
color: #ffffff !important;
font-weight: 600 !important;
font-size: 15px !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
margin-bottom: 10px !important;
}

/* ============ Service Boxes & Info ============ */

.no-ser-box {
background: rgba(40, 44, 52, 0.9) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 16px !important;
color: #ffffff !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.no-ser-box .title,
.no-ser-box .text {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ============ Text Colors ============ */

/* Headings - Clear White */
h1, h2, h3, h4, h5, h6,
.card-title,
.service-title,
.page-title {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Paragraphs & Text */
p, span, div, a, li, td, th {
color: #ffffff !important;
}

/* Special Color Classes */
.p-color,
.i-color,
.w-color,
.s-color,
.d-color {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ============ Buttons ============ */

.btn {
background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
color: #ffffff !important;
border: none !important;
border-radius: 12px !important;
padding: 16px 24px !important;
font-weight: 600 !important;
font-size: 16px !important;
box-shadow:
0 4px 16px rgba(76, 175, 80, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2) !important;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.btn:hover,
.btn:active {
background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%) !important;
transform: translateY(-2px) !important;
box-shadow:
0 6px 20px rgba(76, 175, 80, 0.4),
0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.btn-primary {
background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%) !important;
}

.btn-secondary {
background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%) !important;
}

/* ============ Dashboard Cards (nwoCard) ============ */

.nwoCard {
background: rgba(30, 32, 40, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
color: #ffffff !important;
}

.nwoCard .title,
.nwoCard .value,
.nwoCard .icon {
color: #ffffff !important;
}

/* ============ Header & Navigation ============ */

.d-header {
background: rgba(30, 32, 40, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ============ Welcome Card ============ */

.welcome-section .card,
.dark-welcome-card {
background: rgba(40, 44, 52, 0.95) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.user_d_left h6,
.user_d_left h3 {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ============ Service Description ============ */

.no-serds {
background: transparent !important;
}

.no-serds .service-title {
color: #ffffff !important;
font-weight: 600 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

#s_name,
#s_id,
#s_sep,
#s_link,
#s_time,
#s_desc,
[data-id="serviceLink"],
[data-id="serviceStart"],
[data-id="serviceSpeed"],
[data-id="serviceDesc"] {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ============ Dropdown Specific - Stable No Bounce ============ */

#orderform-category,
#orderform-service {
background: linear-gradient(135deg, rgba(40, 44, 52, 0.95) 0%, rgba(30, 32, 40, 0.95) 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
color: #ffffff !important;
border: 2px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important; /* ลด transition */
/* ป้องกัน bounce */
-webkit-transform: translateZ(0) !important;
transform: translateZ(0) !important;
will-change: border-color, box-shadow !important;
}

#orderform-category option,
#orderform-service option {
background: #1e2127 !important;
color: #ffffff !important;
padding: 14px 20px !important;
}

#orderform-category:focus,
#orderform-service:focus {
border-color: #4caf50 !important;
box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3) !important; /* รวม box-shadow
เป็นบรรทัดเดียว */
/* ลบ transform ที่ทำให้เกิด bounce */
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* ============ Icons ============ */

.d-icon {
color: inherit !important;
}

.d-icon i {
color: inherit !important;
}

/* ============ Alert/Notice Box ============ */

.alert {
background: rgba(40, 44, 52, 0.9) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
color: #ffffff !important;
}

/* ============ Table ============ */

.table {
background: transparent !important;
color: #ffffff !important;
}

.table th,
.table td {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ============ Modal ============ */

.modal-content {
background: rgba(30, 32, 40, 0.98) !important;
backdrop-filter: blur(20px) !important;
-webkit-backdrop-filter: blur(20px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
color: #ffffff !important;
}

.modal-header {
background: rgba(40, 44, 52, 0.8) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
}

.modal-body {
color: #ffffff !important;
}

/* ============ Pagination ============ */

.pagination {
background: transparent !important;
}

.page-link {
background: rgba(40, 44, 52, 0.9) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}

.page-link:hover {
background: rgba(76, 175, 80, 0.2) !important;
border-color: #4caf50 !important;
}

.page-item.active .page-link {
background: linear-gradient(135deg, #4caf50 0%, #45a049 100%) !important;
border-color: #4caf50 !important;
}

/* ============ Announcement Box (Thai Flag) ============ */

.thai-flag-panel {
background: linear-gradient(135deg, rgba(40, 44, 52, 0.95) 0%, rgba(30, 32, 40, 0.95) 100%) !important;
backdrop-filter: blur(15px) !important;
-webkit-backdrop-filter: blur(15px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.thai-flag-title {
color: #ffffff !important;
font-weight: 700 !important;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.thai-flag-text {
color: #ffffff !important;
}

/* ============ Sidebar Toggle - เสมอเห็นได้ชัดเจนแม้เมื่อ zoom ============ */

.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
position: fixed !important;
z-index: 99999 !important; /* สูงสุดเพื่อให้เห็นเสมอ */
bottom: 80px !important;
right: 15px !important;
width: 60px !important;
height: 60px !important;
background: linear-gradient(135deg, #ff4757 0%, #c31431 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 16px !important;
border: 3px solid rgba(255, 255, 255, 0.2) !important;
box-shadow:
0 8px 24px rgba(255, 71, 87, 0.6),
0 4px 12px rgba(0, 0, 0, 0.4),
0 0 0 4px rgba(255, 71, 87, 0.2) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateZ(0) scale(1) !important;
-webkit-transform: translateZ(0) scale(1) !important;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.sidebar-toggle:hover,
.sidebar-toggle.ham-icon:hover,
#sidebar-toggle:hover {
transform: translateZ(0) scale(1.1) !important;
-webkit-transform: translateZ(0) scale(1.1) !important;
box-shadow:
0 12px 32px rgba(255, 71, 87, 0.8),
0 6px 16px rgba(0, 0, 0, 0.5),
0 0 0 6px rgba(255, 71, 87, 0.3) !important;
}

.sidebar-toggle:active,
.sidebar-toggle.ham-icon:active,
#sidebar-toggle:active {
transform: translateZ(0) scale(0.95) !important;
-webkit-transform: translateZ(0) scale(0.95) !important;
}

/* Hamburger icon bars - สีขาวชัดเจน */
.sidebar-toggle.ham-icon::before,
.sidebar-toggle.ham-icon::after,
.sidebar-toggle.ham-icon span {
background-color: #ffffff !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ============ Force White Text Everywhere ============ */

* {
-webkit-tap-highlight-color: transparent !important;
}

/* Override any conflicting styles */
.card *, .card-body *, .form-control *, .no-ser-box *,
.nwoCard *, .welcome-section *, .dark-welcome-card * {
color: inherit !important;
}

/* Ensure links are visible */
a {
color: #4caf50 !important;
text-decoration: none !important;
}

a:hover {
color: #66bb6a !important;
text-decoration: underline !important;
}

/* ============ ป้องกัน white background เมื่อ zoom ============ */

/* Force dark background for all containers */
.app-content,
.dashboard-root,
.dashboard-root .app-content,
.container,
.container-fluid,
.card,
.card-body,
.card-header {
background-color: transparent !important;
background: transparent !important;
}

/* Override any white backgrounds */
body,
html,
.root,
.dashboard-root,
#app,
main,
section,
div[class*="content"],
div[class*="container"] {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
}

/* Force dark theme for all elements */
*:not(.sidebar-toggle):not(.sidebar-toggle *):not(.sidebar):not(.sidebar *) {
background-color: transparent !important;
}

/* Ensure cards have dark background */
.card,
.card-border {
background: rgba(30, 32, 40, 0.95) !important;
background-color: rgba(30, 32, 40, 0.95) !important;
}

/* ============ Scrollbar - Dark Theme ============ */

::-webkit-scrollbar {
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: rgba(30, 32, 40, 0.5) !important;
border-radius: 4px;
}

::-webkit-scrollbar-thumb {
background: rgba(76, 175, 80, 0.5) !important;
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: rgba(76, 175, 80, 0.7) !important;
}

/* ============ Selection Color ============ */

::selection {
background: rgba(76, 175, 80, 0.3) !important;
color: #ffffff !important;
}

::-moz-selection {
background: rgba(76, 175, 80, 0.3) !important;
color: #ffffff !important;
}

/* ============ Smooth Animations ============ */

* {
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ============ Performance Optimizations ============ */

.card, .form-control, .btn, .nwoCard {
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
will-change: transform !important;
backface-visibility: hidden !important;
-webkit-backface-visibility: hidden !important;
}

}

/* ============ Zoom Protection - ป้องกัน white background เมื่อ zoom ============ */
/* ใช้ทั้ง orientation และ device-width เพื่อให้ทำงานแม้เมื่อ zoom */

@media (orientation: portrait), (orientation: landscape) {
/* Force dark background even when zoomed */
html {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
}

body {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
color: #ffffff !important;
}

/* Sidebar toggle always visible */
.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
position: fixed !important;
z-index: 99999 !important;
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
}
}

/* ============ Sidebar Toggle - เสมอเห็นได้แม้เมื่อ zoom เข้า ============ */
/* ใช้ media query ที่ไม่ขึ้นกับ viewport width */

.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
position: fixed !important;
z-index: 99999 !important;
bottom: 80px !important;
right: 15px !important;
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
min-height: 60px !important;
background: linear-gradient(135deg, #ff4757 0%, #c31431 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-radius: 16px !important;
border: 3px solid rgba(255, 255, 255, 0.3) !important;
box-shadow:
0 8px 24px rgba(255, 71, 87, 0.6),
0 4px 12px rgba(0, 0, 0, 0.4),
0 0 0 4px rgba(255, 71, 87, 0.2),
inset 0 2px 4px rgba(255, 255, 255, 0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateZ(0) scale(1) !important;
-webkit-transform: translateZ(0) scale(1) !important;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
pointer-events: auto !important;
touch-action: manipulation !important;
-webkit-tap-highlight-color: transparent !important;
}

.sidebar-toggle:hover,
.sidebar-toggle.ham-icon:hover,
#sidebar-toggle:hover,
.sidebar-toggle:focus,
.sidebar-toggle.ham-icon:focus,
#sidebar-toggle:focus {
transform: translateZ(0) scale(1.1) !important;
-webkit-transform: translateZ(0) scale(1.1) !important;
box-shadow:
0 12px 32px rgba(255, 71, 87, 0.8),
0 6px 16px rgba(0, 0, 0, 0.5),
0 0 0 6px rgba(255, 71, 87, 0.3),
inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
background: linear-gradient(135deg, #ff6b7a 0%, #ff4757 100%) !important;
}

.sidebar-toggle:active,
.sidebar-toggle.ham-icon:active,
#sidebar-toggle:active {
transform: translateZ(0) scale(0.95) !important;
-webkit-transform: translateZ(0) scale(0.95) !important;
box-shadow:
0 4px 12px rgba(255, 71, 87, 0.8),
0 2px 6px rgba(0, 0, 0, 0.5),
0 0 0 3px rgba(255, 71, 87, 0.3) !important;
}

/* Hamburger icon bars - สีขาวชัดเจน */
.sidebar-toggle.ham-icon::before,
.sidebar-toggle.ham-icon::after,
.sidebar-toggle.ham-icon span {
background-color: #ffffff !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
opacity: 1 !important;
}

/* ================================================================
🔧 ZOOM PROTECTION FIX - ป้องกัน White Background เมื่อ Zoom
================================================================
แก้ไขปัญหาพื้นหลังสีขาวและแถบเมนูหายไปเมื่อ zoom เข้า
================================================================ */

/* ============ Force Dark Background - ไม่ขึ้นกับ zoom level ============ */
/* ใช้ orientation เพื่อให้ทำงานแม้เมื่อ zoom */

html, body {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
color: #ffffff !important;
}

/* ป้องกัน white background ในทุก element */
* {
background-color: transparent !important;
}

/* Force dark background สำหรับ containers */
body,
html,
.root,
.dashboard-root,
.app-content,
.container,
.container-fluid,
#app,
main,
section {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
}

/* Cards - Dark theme */
.card,
.card-border {
background: rgba(30, 32, 40, 0.95) !important;
background-color: rgba(30, 32, 40, 0.95) !important;
color: #ffffff !important;
}

.card-body,
.card-header {
background: transparent !important;
background-color: transparent !important;
color: #ffffff !important;
}

/* ============ Override Desktop Hide - แสดงเมื่อ zoom ============ */
/* แม้ desktop ก็แสดง toggle button เมื่อ zoom เข้า */

@media (min-width: 1400px) {
/* ถ้า zoom เข้า ให้แสดง toggle button */
@media (max-device-width: 1400px) {
.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
}
}

/* ============ Zoom Detection - Force Dark Theme ============ */
/* ใช้ orientation เพื่อ detect zoom และ force dark theme */

@media (orientation: portrait), (orientation: landscape) {
html, body {
background: linear-gradient(135deg, #0f1117 0%, #1a1d29 50%, #0f1117 100%) !important;
background-color: #0f1117 !important;
}

.sidebar-toggle,
.sidebar-toggle.ham-icon,
#sidebar-toggle {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
}
}

/* ================================================================
End of Mobile Dark Theme Fix
================================================================ */

/* ================================================================
End of Zoom Protection Fix
================================================================ */

/* ================================================================
Safari Desktop Performance Optimizations (MacBook)
================================================================ */

/* Detect Safari Desktop - ไม่กระทบ Mobile */
@supports (-webkit-appearance: none) and (not (display: -webkit-box)) {
@media (min-width: 768px) and (min-height: 600px) {
/* Safari Desktop Only - ไม่กระทบ Mobile */

/* 1. Hardware Acceleration สำหรับ Safari */
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

/* 2. Optimize Cards - ใช้ GPU acceleration */
.card,
.card-border,
.nwoCard,
.no-ser-box {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px;
will-change: auto; /* ลด will-change ที่ไม่จำเป็น */
contain: layout style paint;
isolation: isolate;
}

/* 3. Optimize Transitions - เร็วขึ้นสำหรับ Safari */
* {
-webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.card,
.btn,
.form-control,
.form-select {
-webkit-transition-duration: 0.15s;
transition-duration: 0.15s;
}

/* 4. Optimize Buttons */
.btn {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: auto;
}

.btn:hover {
-webkit-transform: translateZ(0) translateY(-1px);
transform: translateZ(0) translateY(-1px);
}

/* 5. Optimize Form Controls */
.form-control:not(.charge-input),
.form-select {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: auto;
}

.form-control:not(.charge-input):focus,
.form-select:focus {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

/* 6. Optimize Service Items - ใช้ contain เพื่อลด reflow */
.service-item {
contain: layout style;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: auto;
}

/* 7. Optimize Animations - ใช้ transform3d */
@keyframes s {
0% {
background-position: 200% 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
background-position: -200% 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.skeleton {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: background-position;
}

/* 8. Optimize Sidebar */
.sidebar {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: transform;
}

/* 9. Optimize Modals */
.modal-content {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

/* 10. Optimize Dropdowns */
.dropdown-menu {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

/* 11. Optimize Scroll Performance */
.sidebar-body,
.services-wrapper,
.op-search-box,
.select-options {
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

/* 12. ลด will-change ที่ไม่จำเป็น - ใช้เฉพาะเมื่อจำเป็นจริงๆ */
.thai-flag-panel {
will-change: auto;
contain: layout style paint;
}

/* 13. Optimize Images */
img {
-webkit-transform: translateZ(0);
transform: translateZ(0);
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}

/* 14. Optimize Icons */
.d-icon,
.icon,
i {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: auto;
}

/* 15. Optimize Navigation */
.nav-link,
.nmenu-link,
.s-menu-link {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: auto;
}

/* 16. Optimize Search Input */
.search-services,
.op-search-box,
.search-input {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: auto;
}

/* 17. Optimize Tables */
.table {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

/* 18. Force GPU acceleration สำหรับ elements ที่มีการ animate */
.nwoCard:hover,
.card:hover,
.btn:hover {
-webkit-transform: translateZ(0) translateY(-2px);
transform: translateZ(0) translateY(-2px);
}

/* 19. Optimize Toast Notifications */
.toast {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

/* 20. Disable expensive effects สำหรับ Safari */
.card::before,
.nwoCard::before,
.nwoCard::after {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: opacity;
}

/* 21. Optimize Welcome Section */
.welcome-section,
.welcome-card {
-webkit-transform: translateZ(0);
transform: translateZ(0);
contain: layout style;
}

/* 22. Optimize Dashboard Head */
.dashboard-head-wrapper,
.dashboard-head {
-webkit-transform: translateZ(0);
transform: translateZ(0);
contain: layout style;
}

/* 23. Reduce Repaints - ใช้ contain สำหรับ sections */
.app-content,
.container,
.container-fluid {
contain: layout style;
}

/* 24. Optimize Service List Rendering */
.services-wrapper .si-wrapper {
contain: layout style;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

/* 25. Optimize Category Navigation */
.nav-new-order,
.d-cat-btn {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: auto;
}

/* 26. Force Layer Creation สำหรับ frequently animated elements */
.sidebar-toggle,
.btn-primary,
.btn-secondary {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}

/* 27. Optimize Form Groups */
.form-group {
contain: layout style;
}

/* 28. Optimize Pagination */
.pagination {
-webkit-transform: translateZ(0);
transform: translateZ(0);
}

.page-link {
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: auto;
}

/* 29. Optimize Alerts */
.alert {
-webkit-transform: translateZ(0);
transform: translateZ(0);
contain: layout style;
}

/* 30. Final Performance Boost - Reduce Composite Layers */
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* Disable expensive filters on hover */
.hpla-item:hover {
filter: none;
-webkit-filter: none;
}
}
}

/* ================================================================
End of Safari Desktop Performance Optimizations
================================================================ */


/* ═══════════════════════════════════════════════════════════════
   🎮 CYBERPUNK HERO - HOLOGRAPHIC GLASS SPHERE ICONS
   SMM-LIKE.COM - Futuristic Social Media Display
   ═══════════════════════════════════════════════════════════════ */

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

:root {
  --cyber-primary: #00f0ff;
  --cyber-secondary: #ff00ff;
  --cyber-accent: #ffff00;
  --cyber-success: #00ff88;
  --cyber-dark: #0a0a0f;
}

/* ===== MAIN HERO CONTAINER ===== */
.cyber-hero-container {
  position: relative;
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px;
}

/* Character Wrapper */
.cyber-character {
  position: relative;
  width: 400px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.cyber-character img {
  width: 100%;
  max-width: 400px;
  height: auto;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 0 40px rgba(0, 240, 255, 0.6));
  animation: characterFloat 4s ease-in-out infinite;
}

@keyframes characterFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* Hide tablet overlay since image already has it */
.holo-tablet {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌟 EXACT REPLICA - SMM-LIKE.COM REFERENCE IMAGE ICONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes iconFloat {
  0%, 100% { 
    transform: translateY(0) scale(1);
  }
  50% { 
    transform: translateY(-15px) scale(1.03);
  }
}

@keyframes rainbowGlow {
  0%, 100% { 
    filter: hue-rotate(0deg) brightness(1);
  }
  50% { 
    filter: hue-rotate(30deg) brightness(1.2);
  }
}

@keyframes ringPulse {
  0%, 100% { 
    opacity: 0.7;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-5px) rotate(180deg);
    opacity: 1;
  }
}

/* ===== BASE ICON CONTAINER ===== */
.orbit-icon-3d {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  
  /* Default size - will be overridden per platform */
  width: 80px;
  height: 80px;
  
  /* ===== TRUE 3D PROPERTIES ===== */
  transform-style: preserve-3d;
  perspective: 800px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  
  /* GPU Acceleration */
  will-change: transform, box-shadow, filter;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  
  /* Float animation */
  animation: iconFloat 5s ease-in-out infinite;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ===== HOLOGRAPHIC RAINBOW RING (OUTER GLOW) ===== */
.orbit-icon-3d::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  
  /* Rainbow holographic border */
  background: conic-gradient(
    from 0deg,
    rgba(0, 255, 255, 0.9),
    rgba(255, 0, 255, 0.8),
    rgba(255, 255, 0, 0.7),
    rgba(0, 255, 255, 0.9),
    rgba(255, 0, 255, 0.8),
    rgba(0, 255, 255, 0.9)
  );
  
  /* Animation */
  animation: rainbowGlow 4s linear infinite, ringPulse 3s ease-in-out infinite;
  
  /* Blur for glow effect */
  filter: blur(4px);
  opacity: 0.8;
  z-index: -2;
}

/* ===== GLASS BUBBLE CONTAINER ===== */
.orbit-icon-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  
  /* Glass effect */
  background: 
    /* Top-left highlight reflection */
    radial-gradient(
      ellipse 50% 35% at 25% 20%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.5) 40%,
      transparent 70%
    ),
    /* Subtle cyan tint at bottom */
    radial-gradient(
      ellipse 60% 40% at 70% 85%,
      rgba(0, 200, 255, 0.25) 0%,
      transparent 60%
    );
  
  /* Glass border */
  border: 2.5px solid rgba(255, 255, 255, 0.5);
  
  /* Frosted glass */
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  
  z-index: -1;
}

/* ===== ICON STYLING ===== */
.orbit-icon-3d i {
  position: relative;
  z-index: 10;
  font-size: 34px;
  color: #ffffff;
  
  /* Icon glow */
  text-shadow: 
    0 0 15px currentColor,
    0 0 30px currentColor;
  
  filter: drop-shadow(0 0 8px currentColor);
}

/* ===== HOVER EFFECTS ===== */
.orbit-icon-3d:hover {
  transform: translateY(-20px) scale(1.2) !important;
  z-index: 1000;
  animation-play-state: paused;
}

.orbit-icon-3d:hover::before {
  opacity: 1;
  filter: blur(6px);
}

.orbit-icon-3d:hover i {
  filter: drop-shadow(0 0 15px currentColor) drop-shadow(0 0 30px currentColor);
}

/* ===== ICON POSITIONS ===== */
.orbit-icon-3d:nth-child(1) { top: 3%; left: -3%; animation-delay: 0s; }
.orbit-icon-3d:nth-child(2) { top: -2%; right: 12%; animation-delay: 0.7s; }
.orbit-icon-3d:nth-child(3) { top: 18%; left: -15%; animation-delay: 1.4s; }
.orbit-icon-3d:nth-child(4) { bottom: 20%; right: -5%; animation-delay: 2.1s; }
.orbit-icon-3d:nth-child(5) { top: 32%; right: -12%; animation-delay: 2.8s; }
.orbit-icon-3d:nth-child(6) { bottom: 38%; left: -10%; animation-delay: 3.5s; }
.orbit-icon-3d:nth-child(7) { top: 48%; left: 8%; animation-delay: 4.2s; }
.orbit-icon-3d:nth-child(8) { top: 8%; left: 18%; animation-delay: 4.9s; }
.orbit-icon-3d:nth-child(9) { bottom: 5%; left: -5%; animation-delay: 5.6s; }
.orbit-icon-3d:nth-child(10) { bottom: 25%; right: 0%; animation-delay: 6.3s; }

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 PLATFORM-SPECIFIC DESIGNS - EXACT MATCH TO REFERENCE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ===== FACEBOOK - CIRCULAR SPHERE ===== */
.orbit-icon-3d.facebook {
  width: 85px;
  height: 85px;
  border-radius: 50%;
}

.orbit-icon-3d.facebook::before {
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 180, 255, 0.9),
    rgba(100, 150, 255, 0.8),
    rgba(0, 255, 255, 0.7),
    rgba(180, 100, 255, 0.8),
    rgba(0, 180, 255, 0.9)
  );
}

.orbit-icon-3d.facebook::after {
  border-radius: 50%;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 70% 85%, rgba(24, 119, 242, 0.3) 0%, transparent 50%),
    linear-gradient(145deg, rgba(66, 103, 178, 0.95) 0%, rgba(24, 119, 242, 1) 50%, rgba(15, 82, 186, 0.95) 100%);
  box-shadow: 
    0 0 50px rgba(24, 119, 242, 0.6),
    0 0 100px rgba(24, 119, 242, 0.3),
    inset 0 -10px 25px rgba(0, 0, 80, 0.4),
    inset 0 10px 20px rgba(255, 255, 255, 0.25);
}

.orbit-icon-3d.facebook i {
  color: #ffffff;
  font-size: 36px;
}

/* ===== INSTAGRAM - ROUNDED SQUARE ===== */
.orbit-icon-3d.instagram {
  width: 80px;
  height: 80px;
  border-radius: 22px;
}

.orbit-icon-3d.instagram::before {
  border-radius: 28px;
  background: conic-gradient(
    from 45deg,
    rgba(245, 133, 41, 0.9),
    rgba(221, 42, 123, 0.9),
    rgba(129, 52, 175, 0.9),
    rgba(81, 91, 212, 0.8),
    rgba(0, 255, 255, 0.6),
    rgba(245, 133, 41, 0.9)
  );
}

.orbit-icon-3d.instagram::after {
  border-radius: 22px;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(145deg, rgba(245, 133, 41, 0.9) 0%, rgba(221, 42, 123, 0.9) 50%, rgba(129, 52, 175, 0.9) 100%);
  box-shadow: 
    0 0 50px rgba(221, 42, 123, 0.6),
    0 0 100px rgba(129, 52, 175, 0.3),
    inset 0 -10px 25px rgba(80, 0, 60, 0.4),
    inset 0 10px 20px rgba(255, 255, 255, 0.25);
}

/* ===== TIKTOK - ROUNDED SQUARE (LIKE REFERENCE) ===== */
.orbit-icon-3d.tiktok {
  width: 85px;
  height: 85px;
  border-radius: 24px;
}

.orbit-icon-3d.tiktok::before {
  border-radius: 30px;
  background: conic-gradient(
    from 0deg,
    rgba(37, 244, 238, 0.9),
    rgba(254, 44, 85, 0.9),
    rgba(0, 255, 255, 0.7),
    rgba(255, 0, 255, 0.8),
    rgba(37, 244, 238, 0.9)
  );
  animation-duration: 3s;
}

.orbit-icon-3d.tiktok::after {
  border-radius: 24px;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 15% 70%, rgba(37, 244, 238, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse 30% 25% at 85% 75%, rgba(254, 44, 85, 0.5) 0%, transparent 50%),
    linear-gradient(145deg, rgba(20, 20, 20, 0.98) 0%, rgba(0, 0, 0, 1) 100%);
  box-shadow: 
    0 0 40px rgba(37, 244, 238, 0.5),
    0 0 60px rgba(254, 44, 85, 0.4),
    inset 0 -10px 25px rgba(0, 0, 0, 0.5),
    inset 0 10px 20px rgba(255, 255, 255, 0.15);
}

.orbit-icon-3d.tiktok i {
  font-size: 32px;
}

/* ===== YOUTUBE - PILL/CAPSULE SHAPE ===== */
.orbit-icon-3d.youtube {
  width: 110px;
  height: 65px;
  border-radius: 32px;
}

.orbit-icon-3d.youtube::before {
  border-radius: 38px;
  background: conic-gradient(
    from 0deg,
    rgba(255, 0, 0, 0.9),
    rgba(255, 100, 100, 0.8),
    rgba(0, 255, 255, 0.5),
    rgba(255, 150, 150, 0.7),
    rgba(255, 0, 0, 0.9)
  );
}

.orbit-icon-3d.youtube::after {
  border-radius: 32px;
  background: 
    radial-gradient(ellipse 45% 40% at 25% 25%, rgba(255, 255, 255, 0.95) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 75% 80%, rgba(255, 0, 0, 0.3) 0%, transparent 50%),
    linear-gradient(145deg, rgba(255, 30, 30, 0.95) 0%, rgba(255, 0, 0, 1) 50%, rgba(180, 0, 0, 0.95) 100%);
  box-shadow: 
    0 0 50px rgba(255, 0, 0, 0.6),
    0 0 100px rgba(255, 0, 0, 0.3),
    inset 0 -8px 20px rgba(100, 0, 0, 0.5),
    inset 0 8px 18px rgba(255, 200, 200, 0.3);
}

.orbit-icon-3d.youtube i {
  font-size: 28px;
}

/* ===== X (TWITTER) - ROUNDED SQUARE (BLACK X LOGO) ===== */
.orbit-icon-3d.x-twitter {
  width: 78px;
  height: 78px;
  border-radius: 20px;
}

.orbit-icon-3d.x-twitter img.x-logo-img {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  object-fit: contain; /* Prevents distortion */
  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
  transform: translateZ(10px);
  pointer-events: none; /* Ensures click goes to parent */
}

.orbit-icon-3d.x-twitter::before {
  border-radius: 26px;
  background: conic-gradient(
    from 0deg,
    rgba(0, 0, 0, 0.9),
    rgba(100, 100, 100, 0.8),
    rgba(0, 255, 255, 0.5),
    rgba(255, 255, 255, 0.6),
    rgba(0, 0, 0, 0.9)
  );
}

.orbit-icon-3d.x-twitter::after {
  border-radius: 20px;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.9) 0%, transparent 55%),
    linear-gradient(145deg, rgba(50, 50, 50, 0.95) 0%, rgba(0, 0, 0, 1) 100%);
  box-shadow: 
    0 0 50px rgba(0, 0, 0, 0.6),
    0 0 80px rgba(100, 100, 100, 0.3),
    inset 0 -10px 25px rgba(0, 0, 0, 0.6),
    inset 0 10px 20px rgba(255, 255, 255, 0.2);
}

/* ===== LINKEDIN - ROUNDED SQUARE ===== */
.orbit-icon-3d.linkedin {
  width: 78px;
  height: 78px;
  border-radius: 20px;
}

.orbit-icon-3d.linkedin::before {
  border-radius: 26px;
  background: conic-gradient(
    from 0deg,
    rgba(0, 119, 181, 0.9),
    rgba(0, 200, 255, 0.8),
    rgba(0, 255, 255, 0.6),
    rgba(100, 180, 255, 0.8),
    rgba(0, 119, 181, 0.9)
  );
}

.orbit-icon-3d.linkedin::after {
  border-radius: 20px;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(145deg, rgba(0, 150, 200, 0.95) 0%, rgba(0, 119, 181, 1) 50%, rgba(0, 80, 130, 0.95) 100%);
  box-shadow: 
    0 0 50px rgba(0, 119, 181, 0.6),
    0 0 100px rgba(0, 119, 181, 0.3),
    inset 0 -10px 25px rgba(0, 0, 80, 0.4),
    inset 0 10px 20px rgba(255, 255, 255, 0.25);
}

/* ===== WHATSAPP - ROUNDED SQUARE (LIKE REFERENCE) ===== */
.orbit-icon-3d.whatsapp {
  width: 80px;
  height: 80px;
  border-radius: 22px;
}

.orbit-icon-3d.whatsapp::before {
  border-radius: 28px;
  background: conic-gradient(
    from 0deg,
    rgba(37, 211, 102, 0.9),
    rgba(0, 255, 180, 0.8),
    rgba(0, 255, 255, 0.6),
    rgba(100, 255, 150, 0.8),
    rgba(37, 211, 102, 0.9)
  );
}

.orbit-icon-3d.whatsapp::after {
  border-radius: 22px;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(145deg, rgba(60, 220, 120, 0.95) 0%, rgba(37, 211, 102, 1) 50%, rgba(18, 140, 72, 0.95) 100%);
  box-shadow: 
    0 0 50px rgba(37, 211, 102, 0.6),
    0 0 100px rgba(37, 211, 102, 0.3),
    inset 0 -10px 25px rgba(0, 60, 30, 0.4),
    inset 0 10px 20px rgba(255, 255, 255, 0.25);
}

/* ===== TELEGRAM - CIRCULAR ===== */
.orbit-icon-3d.telegram {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.orbit-icon-3d.telegram::before {
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(0, 136, 204, 0.9),
    rgba(0, 200, 255, 0.8),
    rgba(0, 255, 255, 0.6),
    rgba(100, 200, 255, 0.8),
    rgba(0, 136, 204, 0.9)
  );
}

.orbit-icon-3d.telegram::after {
  border-radius: 50%;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(145deg, rgba(50, 180, 230, 0.95) 0%, rgba(0, 136, 204, 1) 50%, rgba(0, 100, 160, 0.95) 100%);
  box-shadow: 
    0 0 50px rgba(0, 136, 204, 0.6),
    0 0 100px rgba(0, 200, 255, 0.3),
    inset 0 -10px 25px rgba(0, 0, 80, 0.4),
    inset 0 10px 20px rgba(255, 255, 255, 0.25);
}

/* ===== SNAPCHAT - CIRCULAR (GREEN GHOST) ===== */
.orbit-icon-3d.snapchat {
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

.orbit-icon-3d.snapchat::before {
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 252, 0, 0.9),
    rgba(255, 255, 150, 0.8),
    rgba(0, 255, 255, 0.5),
    rgba(255, 255, 100, 0.8),
    rgba(255, 252, 0, 0.9)
  );
}

.orbit-icon-3d.snapchat::after {
  border-radius: 50%;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.98) 0%, transparent 55%),
    linear-gradient(145deg, rgba(255, 255, 100, 0.95) 0%, rgba(255, 252, 0, 1) 50%, rgba(230, 220, 0, 0.95) 100%);
  box-shadow: 
    0 0 50px rgba(255, 252, 0, 0.6),
    0 0 100px rgba(255, 252, 0, 0.3),
    inset 0 -8px 20px rgba(180, 160, 0, 0.3),
    inset 0 8px 18px rgba(255, 255, 255, 0.4);
}

.orbit-icon-3d.snapchat i {
  color: #000000;
  font-size: 30px;
  text-shadow: none;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}

/* ===== HEART - CIRCULAR WITH PULSE ===== */
.orbit-icon-3d.heart {
  width: 75px;
  height: 75px;
  border-radius: 50%;
}

.orbit-icon-3d.heart::before {
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 71, 87, 0.9),
    rgba(255, 150, 180, 0.8),
    rgba(255, 0, 150, 0.7),
    rgba(255, 100, 130, 0.8),
    rgba(255, 71, 87, 0.9)
  );
  animation: rainbowGlow 3s linear infinite, ringPulse 2s ease-in-out infinite;
}

.orbit-icon-3d.heart::after {
  border-radius: 50%;
  background: 
    radial-gradient(ellipse 50% 35% at 25% 20%, rgba(255, 255, 255, 0.95) 0%, transparent 60%),
    linear-gradient(145deg, rgba(255, 120, 140, 0.95) 0%, rgba(255, 71, 87, 1) 50%, rgba(200, 50, 70, 0.95) 100%);
  box-shadow: 
    0 0 50px rgba(255, 71, 87, 0.6),
    0 0 100px rgba(255, 0, 100, 0.3),
    inset 0 -10px 25px rgba(100, 0, 30, 0.4),
    inset 0 10px 20px rgba(255, 255, 255, 0.25);
}

.orbit-icon-3d.heart i {
  color: #ffffff;
  font-size: 30px;
}

/* ===== GLOW BACKGROUND ===== */
.cyber-glow-bg {
  position: absolute;
  width: 850px;
  height: 850px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: 
    radial-gradient(circle at 20% 30%, rgba(0, 200, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 0, 200, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(100, 100, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  animation: ringPulse 8s ease-in-out infinite;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1200px) {
  .cyber-hero-container { height: 500px; }
  .cyber-character { width: 350px; }
  
  .orbit-icon-3d {
    transform: scale(0.85);
  }
  
  .orbit-icon-3d.youtube {
    width: 95px;
    height: 55px;
  }
}

@media (max-width: 992px) {
  .cyber-hero-container { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   🧊 ULTRA 3D CUBE ICON (X / Twitter)
   ═══════════════════════════════════════════════════════════════ */

/* Clear previous styles for X icon container to allow cube to show */
.orbit-icon-3d.x-twitter {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  overflow: visible !important;
  perspective: 1000px;
}

.orbit-icon-3d.x-twitter::before,
.orbit-icon-3d.x-twitter::after {
  display: none !important; /* Remove old glass effects */
}

/* 3D Cube Container */
.icon-3d {
  position: relative;
  width: 50px;
  height: 50px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: block;
}

/* Base Face Style */
.icon-face {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  backface-visibility: visible; /* Show backfaces for solid cube feel */
  box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Face Transforms */
.icon-face.front  { transform: rotateY(0deg) translateZ(25px); }
.icon-face.back   { transform: rotateY(180deg) translateZ(25px); }
.icon-face.right  { transform: rotateY(90deg) translateZ(25px); }
.icon-face.left   { transform: rotateY(-90deg) translateZ(25px); }
.icon-face.top    { transform: rotateX(90deg) translateZ(25px); }
.icon-face.bottom { transform: rotateX(-90deg) translateZ(25px); }

/* Icons on faces */
.icon-face i {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

/* Glow Effect */
.icon-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  transform: translateZ(0); /* Center glow */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Hover Animation - Rotate Cube */
.orbit-icon-3d.x-twitter:hover .icon-3d {
  transform: rotateX(-20deg) rotateY(180deg) scale(1.2);
}

.orbit-icon-3d.x-twitter:hover .icon-glow {
  opacity: 0.3;
}

/* Auto Rotation Animation (Optional - keeps it alive) */
@keyframes cubeFloat {
  0% { transform: rotateX(-10deg) rotateY(0deg); }
  50% { transform: rotateX(10deg) rotateY(10deg); }
  100% { transform: rotateX(-10deg) rotateY(0deg); }
}

.icon-3d {
  animation: cubeFloat 6s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌟 CYBERPUNK HOLOGRAPHIC SOCIAL ICONS - ULTRA PREMIUM DESIGN
   Collection of floating 3D icons, neon outlines, holographic energy rings,
   crystal & metal materials, luminous particles, digital light waves
   ═══════════════════════════════════════════════════════════════════════════ */

/* RESET EXISTING ICON STYLES */
.orbit-icon-3d::before,
.orbit-icon-3d::after {
  background: none !important;
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   🔮 BASE HOLOGRAPHIC CRYSTAL CONTAINER
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d {
  position: relative;
  width: 85px;
  height: 85px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* Crystal Glass Material */
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.15) 0%, 
      rgba(255, 255, 255, 0.05) 40%,
      rgba(0, 0, 0, 0.2) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  /* Holographic Border */
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ✨ HOLOGRAPHIC OUTER GLOW RING (::before)
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  padding: 4px;
  background: conic-gradient(
    from var(--holo-angle, 0deg),
    transparent 0%,
    var(--icon-color-1, #00f0ff) 15%,
    transparent 30%,
    var(--icon-color-2, #ff00ff) 50%,
    transparent 65%,
    var(--icon-color-1, #00f0ff) 85%,
    transparent 100%
  ) !important;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: holoRingSpin 4s linear infinite;
  opacity: 0.8;
  filter: blur(1px);
  z-index: -1;
}

/* ─────────────────────────────────────────────────────────────────────────────
   🌈 INNER GLASS REFLECTION (::after)
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: 
    /* Top Glass Shine */
    radial-gradient(ellipse 80% 50% at 50% -20%, 
      rgba(255, 255, 255, 0.4) 0%, 
      transparent 60%),
    /* Inner Depth Gradient */
    linear-gradient(180deg, 
      rgba(255, 255, 255, 0.1) 0%, 
      transparent 30%,
      rgba(0, 0, 0, 0.3) 100%) !important;
  box-shadow: 
    /* Neon Glow */
    0 0 30px var(--icon-glow, rgba(0, 240, 255, 0.5)),
    0 0 60px var(--icon-glow, rgba(0, 240, 255, 0.3)),
    /* Inner Light */
    inset 0 2px 10px rgba(255, 255, 255, 0.2),
    inset 0 -5px 20px rgba(0, 0, 0, 0.4) !important;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ⚡ ENERGY RING PARTICLES (Using additional pseudo element via wrapper)
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d i {
  position: relative;
  z-index: 10;
  font-size: 32px;
  color: #ffffff;
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px var(--icon-glow, rgba(0, 240, 255, 0.8));
  transition: all 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   🚀 HOVER EFFECTS - INTENSE NEON ACTIVATION
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d:hover {
  transform: translateY(-10px) scale(1.1) rotateX(10deg) rotateY(-10deg);
  
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.25) 0%, 
      rgba(255, 255, 255, 0.1) 40%,
      rgba(0, 0, 0, 0.1) 100%);
}

.orbit-icon-3d:hover::before {
  animation: holoRingSpin 1.5s linear infinite;
  opacity: 1;
  filter: blur(0);
}

.orbit-icon-3d:hover::after {
  box-shadow: 
    0 0 50px var(--icon-glow, rgba(0, 240, 255, 0.7)),
    0 0 100px var(--icon-glow, rgba(0, 240, 255, 0.5)),
    0 0 150px var(--icon-glow, rgba(0, 240, 255, 0.3)),
    inset 0 2px 15px rgba(255, 255, 255, 0.3),
    inset 0 -5px 25px rgba(0, 0, 0, 0.5) !important;
}

.orbit-icon-3d:hover i {
  text-shadow: 
    0 0 15px currentColor,
    0 0 30px currentColor,
    0 0 60px var(--icon-glow, rgba(0, 240, 255, 1)),
    0 0 100px var(--icon-glow, rgba(0, 240, 255, 0.8));
  transform: scale(1.15);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎨 PLATFORM-SPECIFIC HOLOGRAPHIC COLORS
   ═══════════════════════════════════════════════════════════════════════════ */

/* FACEBOOK - Electric Blue */
.orbit-icon-3d.facebook {
  --icon-color-1: #4267B2;
  --icon-color-2: #00d4ff;
  --icon-glow: rgba(66, 103, 178, 0.7);
  border-radius: 50%;
}
.orbit-icon-3d.facebook::before { border-radius: 50%; }

/* INSTAGRAM - Gradient Rainbow */
.orbit-icon-3d.instagram {
  --icon-color-1: #f09433;
  --icon-color-2: #bc1888;
  --icon-glow: rgba(221, 42, 123, 0.7);
}

/* TIKTOK - Cyan & Magenta */
.orbit-icon-3d.tiktok {
  --icon-color-1: #25F4EE;
  --icon-color-2: #FE2C55;
  --icon-glow: rgba(37, 244, 238, 0.7);
}

/* YOUTUBE - Red Neon */
.orbit-icon-3d.youtube {
  --icon-color-1: #FF0000;
  --icon-color-2: #ff6b6b;
  --icon-glow: rgba(255, 0, 0, 0.7);
  border-radius: 20px;
  width: 100px;
  height: 65px;
}
.orbit-icon-3d.youtube::before { border-radius: 26px; }

/* X/TWITTER - Silver Chrome */
.orbit-icon-3d.x-twitter {
  --icon-color-1: #ffffff;
  --icon-color-2: #888888;
  --icon-glow: rgba(255, 255, 255, 0.5);
}

/* LINKEDIN - Professional Blue */
.orbit-icon-3d.linkedin {
  --icon-color-1: #0077B5;
  --icon-color-2: #00d4ff;
  --icon-glow: rgba(0, 119, 181, 0.7);
}

/* WHATSAPP - Green Energy */
.orbit-icon-3d.whatsapp {
  --icon-color-1: #25D366;
  --icon-color-2: #00ff88;
  --icon-glow: rgba(37, 211, 102, 0.7);
}

/* TELEGRAM - Sky Blue */
.orbit-icon-3d.telegram {
  --icon-color-1: #0088CC;
  --icon-color-2: #00d4ff;
  --icon-glow: rgba(0, 136, 204, 0.7);
}

/* SNAPCHAT - Yellow Flash */
.orbit-icon-3d.snapchat {
  --icon-color-1: #FFFC00;
  --icon-color-2: #ff9500;
  --icon-glow: rgba(255, 252, 0, 0.7);
}
.orbit-icon-3d.snapchat i { color: #000; }

/* HEART - Pink Love */
.orbit-icon-3d.heart {
  --icon-color-1: #FF4757;
  --icon-color-2: #ff6b9d;
  --icon-glow: rgba(255, 71, 87, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════
   🎬 ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Holographic Ring Rotation */
@keyframes holoRingSpin {
  0% { --holo-angle: 0deg; transform: rotate(0deg); }
  100% { --holo-angle: 360deg; transform: rotate(360deg); }
}

/* Floating Animation */
@keyframes cyberFloat {
  0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
  25% { transform: translateY(-8px) rotateX(5deg) rotateY(-5deg); }
  50% { transform: translateY(-5px) rotateX(-3deg) rotateY(3deg); }
  75% { transform: translateY(-12px) rotateX(3deg) rotateY(-3deg); }
}

.orbit-icon-3d {
  animation: cyberFloat 6s ease-in-out infinite;
}

.orbit-icon-3d:nth-child(2) { animation-delay: -1s; }
.orbit-icon-3d:nth-child(3) { animation-delay: -2s; }
.orbit-icon-3d:nth-child(4) { animation-delay: -0.5s; }
.orbit-icon-3d:nth-child(5) { animation-delay: -1.5s; }
.orbit-icon-3d:nth-child(6) { animation-delay: -2.5s; }
.orbit-icon-3d:nth-child(7) { animation-delay: -3s; }
.orbit-icon-3d:nth-child(8) { animation-delay: -3.5s; }
.orbit-icon-3d:nth-child(9) { animation-delay: -4s; }
.orbit-icon-3d:nth-child(10) { animation-delay: -4.5s; }

/* Neon Pulse */
@keyframes neonPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.orbit-icon-3d::before {
  animation: holoRingSpin 4s linear infinite, neonPulse 2s ease-in-out infinite;
}

/* Digital Light Wave on Container */
.cyber-hero-container::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(0, 240, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255, 0, 255, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 0, 0.05) 0%, transparent 50%);
  animation: digitalWave 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes digitalWave {
  0% { transform: rotate(0deg) scale(1); opacity: 0.5; }
  50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   🔧 FIX: ICON CENTERING - ENSURE ICON IS PERFECTLY CENTERED
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override and ensure proper centering */
.orbit-icon-3d {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Icon (i element) - Ensure centered */
.orbit-icon-3d > i,
.orbit-icon-3d > .icon-3d,
.orbit-icon-3d > img {
  position: relative !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
}

/* FontAwesome and Remix Icons - Centered */
.orbit-icon-3d i.fab,
.orbit-icon-3d i.fas,
.orbit-icon-3d i.ri-twitter-x-fill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  line-height: 1 !important;
  text-align: center !important;
}

/* X Icon Image - Centered */
.orbit-icon-3d.x-twitter img.x-logo-img {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Fix ::before and ::after positioning */
.orbit-icon-3d::before,
.orbit-icon-3d::after {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

/* Holographic ring - fix centering */
.orbit-icon-3d::before {
  inset: -8px !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

/* Inner glass - fix centering */
.orbit-icon-3d::after {
  inset: 0 !important;
  transform: none !important;
  top: auto !important;
  left: auto !important;
}

/* Particle container - centered */
.icon-particles {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 100% !important;
  height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🌟 ULTRA-DETAILED 3D CYBER SOCIAL ICONS - CINEMATIC QUALITY
   Floating emblems, glass/metallic textures, neon rings, particles, light trails
   8K Resolution Ready - Octane Render Style
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   🎯 ULTRA 3D EMBLEM BASE - CIRCULAR DESIGN
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d {
  /* Circular Emblem Shape */
  width: 90px !important;
  height: 90px !important;
  border-radius: 50% !important;
  
  /* 3D Depth & Perspective */
  transform-style: preserve-3d !important;
  perspective: 1200px !important;
  
  /* Glass & Metal Material */
  background: 
    /* Top Metallic Shine */
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(255, 255, 255, 0.4) 0%, transparent 50%),
    /* Center Glass */
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 70%),
    /* Bottom Shadow */
    radial-gradient(ellipse 80% 40% at 50% 110%, rgba(0, 0, 0, 0.6) 0%, transparent 60%),
    /* Main Glass Body */
    linear-gradient(180deg, 
      rgba(255, 255, 255, 0.15) 0%, 
      rgba(255, 255, 255, 0.05) 40%,
      rgba(0, 0, 0, 0.2) 70%,
      rgba(0, 0, 0, 0.4) 100%) !important;
  
  /* Metallic Border */
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  
  /* Cinematic Shadow */
  box-shadow: 
    /* Outer Glow */
    0 0 30px var(--icon-glow, rgba(0, 200, 255, 0.5)),
    0 0 60px var(--icon-glow, rgba(0, 200, 255, 0.3)),
    0 0 100px var(--icon-glow, rgba(0, 200, 255, 0.2)),
    /* Inner Depth */
    inset 0 4px 20px rgba(255, 255, 255, 0.15),
    inset 0 -8px 30px rgba(0, 0, 0, 0.4),
    /* Drop Shadow */
    0 15px 40px rgba(0, 0, 0, 0.6) !important;
  
  /* Glass Effect */
  backdrop-filter: blur(25px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(25px) saturate(180%) !important;
  
  /* Smooth Animation */
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ⚡ NEON ENERGY RING (::before) - ROTATING GLOW
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d::before {
  content: '' !important;
  position: absolute !important;
  inset: -12px !important;
  border-radius: 50% !important;
  
  /* Triple Ring Effect */
  background: 
    conic-gradient(from 0deg, 
      transparent 0%, 
      var(--icon-color-1, #00f0ff) 10%, 
      transparent 20%,
      var(--icon-color-2, #ff00ff) 35%,
      transparent 45%,
      var(--icon-color-1, #00f0ff) 60%,
      transparent 70%,
      var(--icon-color-2, #ff00ff) 85%,
      transparent 95%
    ) !important;
  
  /* Ring Mask */
  -webkit-mask: 
    radial-gradient(circle, transparent 70%, black 72%, black 78%, transparent 80%) !important;
  mask: 
    radial-gradient(circle, transparent 70%, black 72%, black 78%, transparent 80%) !important;
  
  /* Spin Animation */
  animation: ultraRingSpin 3s linear infinite !important;
  
  /* Glow */
  filter: blur(3px) !important;
  opacity: 0.9 !important;
  z-index: -1 !important;
}

/* Second Energy Ring */
.orbit-icon-3d::after {
  content: '' !important;
  position: absolute !important;
  inset: -6px !important;
  border-radius: 50% !important;
  
  background: 
    conic-gradient(from 180deg, 
      var(--icon-color-1, #00f0ff) 0%, 
      transparent 15%,
      var(--icon-color-2, #ff00ff) 50%,
      transparent 65%,
      var(--icon-color-1, #00f0ff) 100%
    ) !important;
  
  -webkit-mask: 
    radial-gradient(circle, transparent 78%, black 80%, black 85%, transparent 87%) !important;
  mask: 
    radial-gradient(circle, transparent 78%, black 80%, black 85%, transparent 87%) !important;
  
  animation: ultraRingSpin 5s linear infinite reverse !important;
  filter: blur(1px) !important;
  opacity: 0.7 !important;
  z-index: -1 !important;
}

@keyframes ultraRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🎨 ICON SYMBOL - NEON GLOW TEXT
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d i {
  font-size: 36px !important;
  color: #ffffff !important;
  z-index: 10 !important;
  position: relative !important;
  
  /* Multi-layer Neon Glow */
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px var(--icon-color-1, #00f0ff),
    0 0 40px var(--icon-color-1, #00f0ff),
    0 0 60px var(--icon-color-2, #ff00ff),
    0 0 80px var(--icon-color-2, #ff00ff) !important;
  
  /* Breathing Animation */
  animation: iconBreath 3s ease-in-out infinite !important;
}

@keyframes iconBreath {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    opacity: 0.9; 
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🚀 HOVER EFFECT - CINEMA QUALITY
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d:hover {
  transform: translateY(-15px) scale(1.2) rotateX(15deg) !important;
  
  box-shadow: 
    0 0 50px var(--icon-glow, rgba(0, 200, 255, 0.8)),
    0 0 100px var(--icon-glow, rgba(0, 200, 255, 0.6)),
    0 0 150px var(--icon-glow, rgba(0, 200, 255, 0.4)),
    0 0 200px var(--icon-glow, rgba(0, 200, 255, 0.2)),
    inset 0 5px 30px rgba(255, 255, 255, 0.25),
    inset 0 -10px 40px rgba(0, 0, 0, 0.5),
    0 25px 60px rgba(0, 0, 0, 0.7) !important;
  
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.orbit-icon-3d:hover::before {
  animation-duration: 1s !important;
  opacity: 1 !important;
  inset: -18px !important;
  filter: blur(4px) brightness(1.3) !important;
}

.orbit-icon-3d:hover::after {
  animation-duration: 1.5s !important;
  opacity: 1 !important;
  filter: blur(2px) brightness(1.5) !important;
}

.orbit-icon-3d:hover i {
  transform: scale(1.15) !important;
  animation: none !important;
  text-shadow: 
    0 0 10px #fff,
    0 0 20px #fff,
    0 0 40px var(--icon-color-1, #00f0ff),
    0 0 80px var(--icon-color-1, #00f0ff),
    0 0 120px var(--icon-color-2, #ff00ff),
    0 0 160px var(--icon-color-2, #ff00ff) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   🎨 PLATFORM COLORS - VIBRANT NEON
   ───────────────────────────────────────────────────────────────────────────── */
.orbit-icon-3d.facebook {
  --icon-color-1: #4267B2;
  --icon-color-2: #00d4ff;
  --icon-glow: rgba(66, 103, 178, 0.6);
}

.orbit-icon-3d.instagram {
  --icon-color-1: #F58529;
  --icon-color-2: #DD2A7B;
  --icon-glow: rgba(221, 42, 123, 0.6);
}

.orbit-icon-3d.tiktok {
  --icon-color-1: #25F4EE;
  --icon-color-2: #FE2C55;
  --icon-glow: rgba(37, 244, 238, 0.6);
}

.orbit-icon-3d.youtube {
  --icon-color-1: #FF0000;
  --icon-color-2: #ff6666;
  --icon-glow: rgba(255, 0, 0, 0.6);
}

.orbit-icon-3d.x-twitter {
  --icon-color-1: #ffffff;
  --icon-color-2: #888888;
  --icon-glow: rgba(255, 255, 255, 0.4);
}

.orbit-icon-3d.linkedin {
  --icon-color-1: #0077B5;
  --icon-color-2: #00d4ff;
  --icon-glow: rgba(0, 119, 181, 0.6);
}

.orbit-icon-3d.whatsapp {
  --icon-color-1: #25D366;
  --icon-color-2: #00ff88;
  --icon-glow: rgba(37, 211, 102, 0.6);
}

.orbit-icon-3d.telegram {
  --icon-color-1: #0088CC;
  --icon-color-2: #00d4ff;
  --icon-glow: rgba(0, 136, 204, 0.6);
}

.orbit-icon-3d.snapchat {
  --icon-color-1: #FFFC00;
  --icon-color-2: #ff9500;
  --icon-glow: rgba(255, 252, 0, 0.6);
}
.orbit-icon-3d.snapchat i { color: #000 !important; }

.orbit-icon-3d.heart {
  --icon-color-1: #FF4757;
  --icon-color-2: #ff6b9d;
  --icon-glow: rgba(255, 71, 87, 0.6);
}

/* ─────────────────────────────────────────────────────────────────────────────
   ✨ FLOATING ANIMATION - SMOOTH 3D MOTION
   ───────────────────────────────────────────────────────────────────────────── */
@keyframes ultraFloat {
  0%, 100% { 
    transform: translateY(0) rotateX(0deg) rotateY(0deg); 
  }
  25% { 
    transform: translateY(-12px) rotateX(5deg) rotateY(-5deg); 
  }
  50% { 
    transform: translateY(-8px) rotateX(-3deg) rotateY(3deg); 
  }
  75% { 
    transform: translateY(-15px) rotateX(3deg) rotateY(-3deg); 
  }
}

.orbit-icon-3d {
  animation: ultraFloat 6s ease-in-out infinite !important;
}

.orbit-icon-3d:nth-child(1) { animation-delay: 0s !important; }
.orbit-icon-3d:nth-child(2) { animation-delay: -0.8s !important; }
.orbit-icon-3d:nth-child(3) { animation-delay: -1.6s !important; }
.orbit-icon-3d:nth-child(4) { animation-delay: -0.4s !important; }
.orbit-icon-3d:nth-child(5) { animation-delay: -1.2s !important; }
.orbit-icon-3d:nth-child(6) { animation-delay: -2s !important; }
.orbit-icon-3d:nth-child(7) { animation-delay: -2.4s !important; }
.orbit-icon-3d:nth-child(8) { animation-delay: -2.8s !important; }
.orbit-icon-3d:nth-child(9) { animation-delay: -3.2s !important; }
.orbit-icon-3d:nth-child(10) { animation-delay: -3.6s !important; }

/* ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   🎮 MAGIC NAV - BOTTOM NAVIGATION BAR (iOS/Android Safe Area Support)
   SMM-LIKE.COM - Fixed Bottom Navigation for All Devices
   ═══════════════════════════════════════════════════════════════════════════ */

/* iOS/Android Safe Area Body Padding */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
  }
}

@supports (padding-bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: calc(90px + constant(safe-area-inset-bottom)) !important;
  }
}

/* Main Navigation Bar - Force Display */
.magic-nav {
  /* Critical: Force display on ALL devices */
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  
  /* Position - Fixed at bottom - CRITICAL for Android Chrome */
  position: fixed !important;
  position: sticky !important; /* Fallback for some Android browsers */
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  
  /* Height with safe area */
  height: 85px;
  min-height: 85px !important;
  height: calc(85px + constant(safe-area-inset-bottom)); /* iOS 11.0-11.2 */
  height: calc(85px + env(safe-area-inset-bottom)); /* iOS 11.2+ */
  
  /* Padding for safe area */
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */
  
  /* Background - SOLID color for Android Chrome (no transparency issues) */
  background: #12121f !important;
  background-color: #12121f !important;
  
  /* Blur effect - disabled on Android for performance */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  
  /* Border */
  border-top: 2px solid rgba(0, 255, 255, 0.3) !important;
  
  /* Flex layout */
  justify-content: center;
  align-items: center;
  
  /* Critical z-index - Maximum priority */
  z-index: 2147483647 !important;
  
  /* REMOVE transform for Android Chrome - can break fixed positioning */
  -webkit-transform: none !important;
  transform: none !important;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  will-change: auto;
  
  /* Touch optimizations */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  
  /* Prevent clipping */
  overflow: visible !important;
  clip: auto !important;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  
  /* Box shadow */
  box-shadow: 
    0 -5px 30px rgba(255,0,255,0.2),
    0 -2px 10px rgba(0,255,255,0.15) !important;
  
  /* Contain - important for fixed positioning */
  contain: none !important;
}

/* Prevent hiding on any screen size */
@media screen and (min-width: 0px) {
  .magic-nav {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* Navigation List */
.magic-nav ul {
  display: flex !important;
  width: 100%;
  max-width: 600px;
  padding: 0 10px;
  margin: 0;
  position: relative;
  justify-content: space-around;
  list-style: none;
}

.magic-nav ul li {
  position: relative;
  flex: 1;
  display: flex !important;
  align-items: center;
  justify-content: center;
  visibility: visible !important;
  opacity: 1 !important;
}

.magic-nav ul li a {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 8px 5px;
  text-align: center;
  text-decoration: none;
  color: rgba(255,255,255,0.6);
  transition: all 0.3s ease;
  border-radius: 12px;
}

.magic-nav ul li a .icon {
  font-size: 1.8em;
  margin-bottom: 4px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.magic-nav ul li a .text {
  font-size: 0.65em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Active state */
.magic-nav ul li.active a {
  color: #ff00ff !important;
}

.magic-nav ul li.active a .icon {
  filter: drop-shadow(0 0 8px #ff00ff);
}

/* Hover state */
.magic-nav ul li a:hover {
  color: #00ffff;
  background: rgba(0,255,255,0.05);
}

/* Hide original mobile navbar when magic-nav is present */
.mobile-navbar {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   🤖 ANDROID CHROME SPECIFIC FIXES - Bottom Navigation Always Visible
   ═══════════════════════════════════════════════════════════════════════════ */

/* Android Chrome - Force bottom nav to stay visible */
@supports (-webkit-touch-callout: none) or (not (-webkit-touch-callout: none)) {
  .magic-nav {
    position: fixed !important;
    bottom: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }
}

/* Ensure body has padding for bottom nav */
body {
  padding-bottom: 90px !important;
  padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
}

/* Android Chrome address bar compensation */
@media screen and (max-width: 768px) {
  html {
    /* Use dvh (dynamic viewport height) for modern browsers */
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
  }
  
  body {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    padding-bottom: 95px !important;
    padding-bottom: calc(95px + env(safe-area-inset-bottom)) !important;
  }
  
  .magic-nav {
    /* Force fixed positioning on mobile */
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    
    /* Ensure it's not affected by parent transforms */
    transform: none !important;
    -webkit-transform: none !important;
    
    /* Solid background for Android */
    background: #12121f !important;
    
    /* Maximum z-index */
    z-index: 2147483647 !important;
    
    /* Disable backdrop-filter on Android for better performance */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Extra small screens (phones) */
@media screen and (max-width: 480px) {
  .magic-nav {
    height: 80px !important;
    min-height: 80px !important;
  }
  
  body {
    padding-bottom: 85px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   🛡️ BLACK SCREEN PREVENTION - Force Content Visibility
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force all main content to be visible */
html, body, .root, .app-content, main, .container, .container-fluid {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Reduce heavy animations for performance */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Disable problematic pseudo-elements that may cause black screen */
body::after {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  z-index: -9999 !important;
}

/* Ensure body::before doesn't block content */
body::before {
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Force solid background on all devices */
html {
  background: #0a0a1a !important;
  background-color: #0a0a1a !important;
}

/* Prevent any overlay from blocking content */
.overlay:not(.sidebar-overlay), 
.loading-overlay, 
.preloader, 
.page-loader, 
.splash-screen {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* END BLACK SCREEN PREVENTION */