@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: #14161C;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
width: 100%;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smooth: always;
}

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: url(https://storage.perfectcdn.com/dfdhtt/5hj9epxjozdafzly.png) 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: url(https://storage.perfectcdn.com/dfdhtt/kfhedzji0trogrhs.png);
background-repeat: no-repeat;
background-position: right top;
top: 100%;
height: 40px;
width: 100%;
}

.home-title.c-2 h2 span::before {
background-image: url(https://storage.perfectcdn.com/dfdhtt/k7z9omli33fo2x27.png);
}

.home-title.c-3 h2 span::before {
background-image: url(https://storage.perfectcdn.com/dfdhtt/k7z9omli33fo2x27.png);
}
.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: url(https://storage.perfectcdn.com/dfdhtt/x1ezkywtn7tfs5ek.png);
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: url(https://storage.perfectcdn.com/dfdhtt/a89nxcc9odc9rkn3.png) !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: url(https://storage.perfectcdn.com/dfdhtt/1ipd5456ro2rf5f3.png);
}
}

.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: url(https://storage.perfectcdn.com/dfdhtt/xn9yl3les033lopg.png);
}
}

.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: url(https://storage.perfectcdn.com/dfdhtt/363dedtpq5i0xjg7.png);
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: url(https://storage.perfectcdn.com/dfdhtt/exqcxbr9g2rw6j4x.png);
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: url(https://storage.perfectcdn.com/dfdhtt/gy7frs5uwtthpp1p.png);
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: url(https://storage.perfectcdn.com/dfdhtt/zx4i1r5kihhbuqdb.png);
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: url(https://storage.perfectcdn.com/dfdhtt/2t08wrbylxi5i6hr.png);
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: url(https://storage.perfectcdn.com/dfdhtt/0unb22rks2cts63k.png);
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: url(https://storage.perfectcdn.com/dfdhtt/0unb22rks2cts63k.png);
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: url(https://storage.perfectcdn.com/dfdhtt/0unb22rks2cts63k.png);
border: 1px solid #2b2f38;
background-repeat: no-repeat;
background-color: #1e2127;
background-size: cover;}

.nwoCard-row .col:nth-child(4) .nwoCard {

background: url(https://storage.perfectcdn.com/dfdhtt/0unb22rks2cts63k.png);
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: url(https://storage.perfectcdn.com/dfdhtt/gy7frs5uwtthpp1p.png);
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: url(https://storage.perfectcdn.com/dfdhtt/zx4i1r5kihhbuqdb.png);
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: url(https://storage.perfectcdn.com/dfdhtt/2t08wrbylxi5i6hr.png);
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
================================================================ */