/*
Lacute Perfect Panel Theme
Author: PANDAA - https://www.r10.net/profil/131224-pandaa.html
*/

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap');
html,
body {
	font-family: 'Kanit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
	background-color: #F7F8FC;
}

.hidden {
	display: none!important
}

select,
option {
	-webkit-appearance: none;
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}

body.dark ::-webkit-scrollbar-thumb {
	background: #232842;
}

::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

.main-color {
	color: #d0d1d3
}

.btn-xs {
	padding: 5px;
	font-size: 12px
}

.dash-menu-btn {
	font-size: 24px;
	color: #4d4d4d;
	cursor: pointer;
}

/* Section */
section {
    background: #f5f5f5;
}

/* Titles */
.section-title {
    font-size: 2rem;
    font-weight: 800;
    color: #0d1b3d;
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.section-subtitle {
    font-size: 1rem;
    color: #7b8499;
    line-height: 1.7;
    max-width: 500px;
}

/* Step Item */
.step-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-top: 28px;
}

/* Step Number Circle */
.step-number {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 50%;
    background: #eef2ff;
    color: #4f46e5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}

/* Step Content */
.step-body h6 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 6px;
}

.step-body p {
    margin: 0;
    color: #7b8494;
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 500px;
}

/* Testimonial Card */
.testimonial-card {
    position: relative;
    background: linear-gradient(135deg, #08122f 0%, #020817 100%);
    border-radius: 28px;
    padding: 34px;
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

/* Glow Effect */
.testimonial-card::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(120, 119, 255, 0.45) 0%, rgba(120, 119, 255, 0) 70%);
    pointer-events: none;
}

/* Avatar */
.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    color: #ffffff;
    font-size: 0.9rem;
}

/* Name */
.testimonial-name {
    font-weight: 700;
    font-size: 1rem;
    color: #ffffff;
}

/* Meta */
.testimonial-meta {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.65);
}

/* Text */
.testimonial-text {
    margin-top: 22px;
    margin-bottom: 18px;
    font-size: 1rem;
    line-height: 1.9;
    color: rgba(255,255,255,0.95);
    font-weight: 500;
}

/* Rating */
.testimonial-card .fa-star {
    color: #ffffff;
    margin-right: 5px;
}

/* Responsive */
@media (max-width: 991px) {
    .testimonial-card {
        margin-top: 20px;
    }

    .section-title {
        font-size: 1.7rem;
    }
}

@media (max-width: 576px) {
    .testimonial-card {
        padding: 24px;
        border-radius: 22px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .step-item {
        gap: 14px;
    }

    .step-number {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 0.95rem;
    }
}

/* =========================
   SECTION
========================= */
#pricing,
#faq {
    background: #f6f7fb;
}

/* =========================
   PRICING CARD
========================= */
.pricing-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #d9dff0;
    border-radius: 26px;
    padding: 28px 22px;
    height: 100%;
    transition: all 0.25s ease;
}

.pricing-card:hover {
    transform: translateY(-3px);
}

.pricing-card h5 {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.4;
    color: #0d1b3d;
    margin-bottom: 10px;
}

/* Highlight Card */
.pricing-card--highlight {
    border: 1.5px solid #6457ff;
    box-shadow:
        0 12px 35px rgba(99, 91, 255, 0.18),
        0 2px 8px rgba(99, 91, 255, 0.08);
}

/* Tag */
.pricing-tag {
    position: absolute;
    top: 12px;
    right: 16px;
    background: #ff7a1a;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 999px;
    line-height: 1;
}

/* Price */
.price {
    font-size: 1.4rem;
    font-weight: 600;
    color: #071c47;
    margin-bottom: 18px;
}

.price span {
    font-size: 0.8rem;
    font-weight: 300;
    color: #7b8499;
}

/* List */
.pricing-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}

.pricing-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8rem;
    color: #677186;
    margin-bottom: 14px;
    line-height: 1.5;
}

.pricing-list li i {
    color: #22c55e;
    margin-top: 3px;
    font-size: 0.95rem;
}

/* =========================
   BUTTONS
========================= */
.btn {
    height: 56px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none;
}

/* BUTTONS */
.btn-primary-soft,
.btn-outline-soft {
    padding: 11px 22px;
    font-size: .88rem;
    border-radius: 50px;
    margin-right: 8px;
}

/* OUTLINE */
.btn-outline-soft {
    background: #fff;
    border: 1px solid #cfd7e8;
    color: #071c47;
}

.btn-outline-soft:hover {
    background: #f3f6ff;
    border-color: #bfc9df;
}

/* Gradient Button */
.btn-primary-soft {
    background: linear-gradient(90deg, #4c46e8 0%, #6c63ff 100%);
    border: none;
    color: #ffffff;

    /* Glow Effect */
    box-shadow:
        0 0 10px rgba(108, 99, 255, 0.45),
        0 0 25px rgba(108, 99, 255, 0.35),
        0 8px 20px rgba(91, 84, 255, 0.28);

    transition: all 0.3s ease;
}

.btn-primary-soft:hover {
    background: linear-gradient(90deg, #433de0 0%, #5f57f6 100%);
    color: #ffffff;
	
}

/* =========================
   FAQ
========================= */
.faq-item {
    padding: 18px 0;
    border-bottom: 1px dashed #d8deea;
}

.faq-q {
    font-size: 1.1rem;
    font-weight: 400;
    color: #111827;
    margin-bottom: 8px;
}

.faq-a {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #6b7280;
}

/* =========================
   CONTACT CARD
========================= */
.hero-card {
    background: #ffffff;
    border: 1px solid #dbe2f0;
    border-radius: 28px;
    padding: 28px;
}

.hero-card h5 {
    font-size: 1.7rem;
    font-weight: 800;
    color: #0d1b3d;
}

.hero-subtitle {
    color: #6b7280;
    line-height: 1.7;
}

.hero-card .btn-success {
    background: #1f8f4e;
    border: none;
    color: #fff;
}

.hero-card .btn-success:hover {
    background: #18753f;
}

.hero-card .small {
    color: #6b7280 !important;
    font-size: 0.92rem;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 991px) {
    .section-title {
        font-size: 1.7rem;
    }

    .pricing-card h5 {
        font-size: 1.4rem;
    }

    .price {
        font-size: 1.8rem;
    }

    .hero-card {
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    .pricing-card,
    .hero-card {
        border-radius: 22px;
    }

    .pricing-card {
        padding: 24px 18px;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .btn {
        height: 52px;
    }
}

:root {
    --primary: #5d5fef;
    --primary-dark: #4b4de0;
    --secondary: #d14cff;
    --text-dark: #0b1023;
    --text-muted: #72798c;
    --bg-soft: #f5f6fb;
}

/* HERO LEFT SIDE */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(93, 95, 239, 0.10);
    color: #5d5fef;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 50px;
    margin-bottom: 14px;
}


/* TITLE */
.hero-title {
    font-size: 3.2rem; /* ลดจากเดิม */
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: -1.5px;
    color: #0b1023;
    margin-bottom: 16px;
    max-width: 560px;
}

.hero-gradient {
    display: block;
    background: linear-gradient(90deg, #5d5fef 0%, #cf49ff 50%, #cf49ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SUBTITLE */
.hero-subtitle {
    font-size: 0.92rem;
    line-height: 1.8;
    color: #72798c;
    max-width: 540px;
    margin-bottom: 18px;
}

.hero-subtitle strong {
    color: #43495d;
}



/* STATS */
.stats-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #303647;
}

.stats-pill strong {
    color: #5d5fef;
}

/* PLATFORM TAGS */
.platform-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 50px;
    font-size: 0.74rem;
    font-weight: 300;
    color: #fff;
    margin-right: 6px;
    margin-bottom: 6px;
}

.platform-pill--facebook {
    background: linear-gradient(90deg, #1877f2 0%, #2d7fff 100%);
}

.platform-pill--instagram {
    background: linear-gradient(90deg, #ffb56b 0%, #f56040 30%, #d62976 70%, #8134af 100%);
}

.platform-pill--tiktok {
    background: #000;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 2.8rem;
        max-width: 500px;
    }
}

@media (max-width: 991px) {
    .hero-title {
        font-size: 2.3rem;
        line-height: 1.08;
    }

    .hero-subtitle {
        font-size: 0.88rem;
    }

    .btn-primary-soft {
        width: 50%;
        justify-content: center;
    }

	.btn-outline-soft {
        width: 25%;
        justify-content: center;
    }

    .platform-pill {
        width: 30%;
        justify-content: center;
    }
}

/* PLATFORM WRAP */
.platform-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* TITLE */
.platform-title {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Page background */
.pc-content {
    background: #eef1f5;
    padding: 20px;
}

/* Main card */
.pc-content .card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 20px;
}

/* Card header */
.pc-content .card-header {
    background: #ffffff;
    border-bottom: 1px solid #edf2f7;
    padding: 14px 20px;
}

.pc-content .card-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
}

/* Card body */
.pc-content .card-body {
    padding: 20px;
}


/* =========================
   TAB BUTTONS
   ========================= */
.nav-tabs {
    border: 0;
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    border: 2px solid #1a73e8;
    border-radius: 999px;
    background: #ffffff;
    color: #1a73e8;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 18px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.08);
}

.nav-tabs .nav-link i {
    margin-right: 6px;
}

.nav-tabs .nav-link:hover {
    background: #f0f7ff;
    color: #0b5ed7;
    border-color: #0b5ed7;
}

.nav-tabs .nav-link.active {
    background: linear-gradient(90deg, #1a73e8, #0d6efd);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(13, 110, 253, 0.35);
}

/* Divider */
.pc-content hr {
    margin: 20px 0;
    border-top: 1px solid #e5e7eb !important;
}

/* =========================
   INNER GUIDE BOX
   ========================= */
#boxsetting2 > div:first-child {
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    padding: 28px 24px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    border: 1px solid #e8edf5 !important;
    box-shadow: none !important;
}

#boxsetting2 h2 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #0b4da0 !important;
    margin-bottom: 20px !important;
    text-align: center;
}

#boxsetting2 p {
    font-size: 14px !important;
    color: #1e293b !important;
    margin-bottom: 12px !important;
    line-height: 1.8 !important;
    text-align: center;
}

#boxsetting2 strong {
    font-weight: 700;
}

/* Warning box */
#boxsetting2 p:last-child {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-size: 13px !important;
    color: #334155 !important;
}

/* =========================
   FORM ELEMENTS
   ========================= */
.form-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.form-control {
height: auto !important;                 /* ปล่อยความสูงให้ขยายตาม Content ด้านใน ไม่ให้โดนตัดขอบ */
    min-height: 50px !important;             /* ตั้งค่าความสูงขั้นต่ำให้ใกล้เคียงกับช่องลิงก์ */
    border: 1px solid #ced4da !important;    /* บังคับเส้นขอบ 4 ด้านให้ชัดเจน */
    border-radius: 10px !important;          /* ความโค้งมนของขอบให้เท่ากับช่องอื่นๆ */
    padding-top: 10px !important;            /* จัดระยะห่างด้านบนในช่อง */
    padding-bottom: 10px !important;         /* จัดระยะห่างด้านล่างในช่อง */
    box-shadow: none !important;             /* ล้างเงาเดิมที่อาจจะไปบังเส้นขอบ */
}

.form-control:focus {
border-color: #28a745 !important;        /* เปลี่ยนเป็นสีเขียวเมื่อ Focus (ปรับสีตามต้องการได้) */
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.15) !important;
}



.form-control::placeholder {
    color: #94a3b8;
}

/* Form text */
.form-text {
    font-size: 12px;
    margin-top: 6px;
    display: block;
    text-align: center;
    color: #ef4444 !important;
}



.btn i {
    margin-right: 6px;
}

/* Success button */
.btn-success {
    background: linear-gradient(90deg, #22c55e, #16a34a);
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(34, 197, 94, 0.25);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.35);
}



/* Warning button */
.btn-warning {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #ffffff;
}

/* Full width button */
.btn-block {
    width: 100%;
    display: block;
}

/* =========================
   QR IMAGE
   ========================= */
#qrimg2 {
    max-width: 260px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 10px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* =========================
   COUNTDOWN CARD
   ========================= */
.statistics-card-1 {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: none;
}

.statistics-card-1 .card-body {
    padding: 18px;
}

#payment_timeout {
    font-weight: 700;
    color: #ef4444 !important;
}

/* Progress bar */
.progress {
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    border-radius: 999px;
    transition: width 1s linear;
}

.bg-brand-color-3 {
    background: linear-gradient(90deg, #22c55e, #16a34a) !important;
}

/* =========================
   RIGHT SIDE CONTENT
   ========================= */
.card-body h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
}

.card-body ul {
    padding-left: 22px;
    margin-bottom: 0;
}

.card-body ul li {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.8;
    color: #334155;
}

.card-body p {
    font-size: 14px;
    line-height: 1.9;
    color: #334155;
    margin-bottom: 20px;
}

/* Links */
.card-body a,
.form-text a {
    color: #1a73e8;
    text-decoration: none;
    font-weight: 600;
}

.card-body a:hover,
.form-text a:hover {
    text-decoration: underline;
}



/* =========================
   ALERT TEXT COLORS
   ========================= */
.text-success {
    color: #10b981 !important;
}

.text-danger {
    color: #ef4444 !important;
}

/* ICON */
.platform-pill i {
    font-size: 0.9rem;
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.9rem;
    }

    .hero-badge {
        font-size: 0.62rem;
    }

    .platform-pill {
        font-size: 0.72rem;
    }
}

.close-sidebar-btn {
	position: absolute;
	top: 20px;
	right: -50px;
	height: 50px;
	width: 50px;
	color: #185bdc;
	background: #fff;
	line-height: 50px;
	text-align: center;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-top: 1px solid;
	border-color: #fff;
	display: none;
	cursor: pointer;
}

.app-sidebar {
	width: 280px;
	position: fixed;
	top: 0px;
	left: 0px;
	height: 100vh;
	background-color: #fff;
	-webkit-box-shadow: 17px 4px 35px rgba(0, 0, 0, 0.02);
	box-shadow: 17px 4px 35px rgba(0, 0, 0, 0.02);
	z-index: 1029;
	-webkit-transition: .14s ease;
	transition: .14s ease;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

.app-sidebar .sidebar-header {
	overflow: hidden;
	position: relative;
	padding-top: 30px;
	padding-bottom: 0px;
	text-align: center;
}

.app-sidebar.sidebar-inact .sidebar-header {
	padding-bottom: 10px
}


.app-sidebar .sidebar-header .logo-lg {
	display: inline-block;
	height: 65px;
}

.app-sidebar .sidebar-header .logo-sm {
	display: none;
	height: 60px;
}

.app-sidebar .sidebar-header .app-logo {
	width: 100%;
	text-align: center;
	position: relative;
}

.app-sidebar .sidebar-header>* {
	position: relative;
	z-index: 2;
}

.app-sidebar .sidebar-header .sh-bg {
	position: absolute;
	left: 0px;
	top: -40px;
	width: calc(100% + 40px);
	height: 174px;
	background-color: transparent;
	-webkit-transform: rotate(-7deg);
	transform: rotate(-7deg);
	-webkit-transform-origin: bottom left;
	transform-origin: bottom left;
	z-index: 0;
	background: #ffffff
}

.app-sidebar .sidebar-header .app-user {
	position: relative;
	padding: 40px 30px;
}

.app-sidebar .sidebar-header .app-user .user-name {
	font-size: 19px;
	text-align: center;
	font-weight: 600;
	color: #342E59;
	margin-top: 15px;
	margin-bottom: 20px
}

.app-sidebar .sidebar-header .app-user .user-balance {
	border-radius: 10px;
	background: #185bdc;
	color: #fff;
	padding: 14px 24px;
	line-height: 30px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: .16s ease;
	transition: .16s ease;
	position: relative;
	letter-spacing: .4px;
	text-decoration: none!important
}

.app-sidebar .sidebar-header .app-user .user-balance:hover {
	-webkit-box-shadow: 0px 6px 25px rgba(24, 91, 220, 0.4);
	box-shadow: 0px 6px 25px rgba(24, 91, 220, 0.4);
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text] {
	overflow: hidden;
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text]::before {
	content: attr(data-second-text);
	position: absolute;
	left: 0px;
	width: 100%;
	top: 100%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	opacity: 0;
	color: #fff;
	-webkit-transition-delay: .16s;
	transition-delay: .16s;
	-webkit-transition: .16s ease;
	transition: .16s ease;
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text]:hover {
	color: rgba(255, 255, 255, 0);
}

.app-sidebar .sidebar-header .app-user .user-balance[data-second-text]:hover::before {
	opacity: 1;
	top: 50%;
}

.app-sidebar .sidebar-content {
	padding: 20px 0;
	overflow-x: auto;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
}

.app-sidebar .sidebar-content::-webkit-scrollbar {
	width: 4px;
}

.app-sidebar .sidebar-content::-webkit-scrollbar-track {
	background: transparent;
}

.app-sidebar .sidebar-content::-webkit-scrollbar-thumb {
	background: #eee;
	border-radius: 2px;
}

body.dark .app-sidebar .sidebar-content::-webkit-scrollbar-thumb {
	background: #232842;
}

.app-sidebar .sidebar-content::-webkit-scrollbar-thumb:hover {
	background: #ccc;
}

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

.app-sidebar .sidebar-menu li {
	display: block;
	margin-bottom: 10px;
}

.app-sidebar .sidebar-menu li.active>a.menu-link {
	background: #E5EEFF;
	color: #2258BF;
	font-weight: 600;
}

.app-sidebar .sidebar-menu li a.menu-link {
	padding: 13px 18px;
	border-radius: 14px;
	display: block;
	font-size: 16px;
	text-decoration: none;
	color: #342e59;
	line-height: 24px;
	-webkit-transition: .14s ease;
	transition: .14s ease;
}

.app-sidebar .sidebar-menu li a.menu-link:hover {
	background: #E5EEFF;
}

.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
	margin-right: 10px;
	height: 24px;
	width: 24px;
	line-height: 24px;
	text-align: center;
	font-size: 20px;
	vertical-align: -1px;
}

.app-header {
	top: 0px;
	left: 280px;
	right: 0px;
	z-index: 1003;
	height: 100px;
	position: fixed;
}

.app-header .row-100 {
	height: 100px;
}

.app-header .col-100 {
	max-height: 100px !important;
}

.marquee-wrapper {
    display: flex;
    align-items: center;     
    justify-content: center; 
    height: 100%;
}

#runningText {
    margin: 0;
    line-height: normal;
}

.app-header .hea-ann-title {
	border-radius: 10px;
	padding: 14px 30px;
	background: #FFAB5A;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
}

.app-header .header-btn {
	font-size: 15;
	font-weight: 400;
	color: #4d4d4d;
	display: inline-block;
	line-height: 37px;
	text-decoration: none;
}

.app-header .header-btn:hover .icon {
	background: #000000;
	color: #6b6b6b;
	opacity: 1;
}

.app-header .header-btn .icon {
	height: 34px;
	display: inline-block;
	width: 34px;
	font-size: 19px;
	line-height: 34px;
	text-align: center;
	border-radius: 9px;
	color: #4d4d4d;
	-webkit-transition: .14s ease;
	transition: .14s ease;
}

.container-fluid {
	padding: 0 50px;
}

.dhr-marquee {
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .6px;
	line-height: 100px;
	height: 100px;
	margin: 0px;
	padding: 0px;
	display: inline-block;
}

.divider {
	border-bottom: 1px solid #EFEFEF;
}

.d-card {
	border-radius: 18px;
	background-color: #fff;
	color: #464E77;
}

.d-card.dc-blue {
	background: -webkit-gradient(linear, left top, right top, from(#185BDC), to(#315DFF)) #185BDC;
	background: linear-gradient(to right, #185BDC, #315DFF) #185BDC;
	color: #fff
}

.d-card.dc-orange {
	background: -webkit-gradient(linear, left top, right top, from(#f25a3c), to(#ff7f40)) #ff7f40;
	background: linear-gradient(to right, #f25a3c, #ff7f40) #ff7f40;
	color: #fff
}

.d-card .d-card-head {
	padding: 20px 4px 20px 4px;
	margin: 0 32px;
	position: relative;
	font-weight: 700;
	color: #464E77;
	font-size: 19px;
	letter-spacing: .2px;
}

.d-card .d-card-head::after {
	content: '';
	position: absolute;
	bottom: 0px;
	width: 160px;
	z-index: 4;
	left: 0px;
	height: 2px;
	background: #185BDC;
}

.d-card .d-card-head .dch-icon {
	height: 42px;
	width: 42px;
	text-align: center;
	line-height: 42px;
	display: inline-block;
	margin-right: 10px;
}

.d-card .d-card-head .dch-icon img {
	height: 42px;
}

.d-card .d-card-body {
	padding: 15px 30px 15px 30px;
}

.d-card.d-pad {
	padding: 34px 30px;
}

.d-card.d-pad-2 {
	padding: 20px 30px;
}

.dc-ht-sup-box {
	display: block;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
}

.dc-ht-sup-box .dc-ht-sup-title {
	font-size: 28px;
	color: #fff;
	font-weight: 600;
	margin-bottom: 14px;
}

.app-content {
	background-color: #F7F8FC;
	padding-left: 280px;
	padding-top: 100px;
	padding-bottom: 30px;
}

.dash-home-status {
	position: relative;
	margin: 0;
	margin-top: 20px;
}

.dash-home-status>.row {
	margin-left: -8px;
	margin-right: -8px;
}

.dash-home-status>.row>div {
	padding-left: 8px;
	padding-right: 8px;
}

/* ===== DASH HOME STATUS ===== */

.dash-home-status .row {
    row-gap: 20px;
}

.dash-home-status .dhs-item {
    position: relative;
    background: #ffffff;
    border: 1px solid #eaedf3; /* ปรับสีขอบให้อ่อนลงสไตล์โมเดิร์นคลีน */
    border-radius: 16px;       /* ปรับจาก 18px เป็น 16px ซึ่งเป็นมาตรฐานสากลของ UI Dashboard */
    padding: 24px;
    overflow: hidden;
    min-height: 115px;         /* ปรับสัดส่วนให้กระชับขึ้น ไม่ดูโล่งเกินไป */
    display: flex;
    align-items: center;       /* จัดกึ่งกลางแนวดิ่งอย่างสมบูรณ์แบบ */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover Effect การ์ด */
.dash-home-status .dhs-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(111, 123, 138, 0.1), 0 4px 8px rgba(111, 123, 138, 0.04);
}

/* จัดเลย์เอาต์ย่อยภายในให้อยู่ระนาบเดียวกัน */
.dash-home-status .dhs-item--body {
    display: flex;
    align-items: center;
    gap: 18px; /* เว้นระยะห่างระหว่างไอคอนและข้อความอย่างสมเหตุสมผล */
    width: 100%;
    z-index: 1; /* ดันข้อความให้อยู่เหนลายเส้น svg */
}

.dash-home-status .dhs-item--content {
    display: flex;
    flex-direction: column;
}


.dash-home-status .dhs-item::after {
    content: "";
    position: absolute;
    bottom: -15px; /* เปลี่ยนมาไว้มุมขวาล่างเพื่อให้รับกับฟอนต์ที่อยู่ขวา */
    right: -10px;
    width: 130px;
    height: 130px;
    opacity: 0.12; /* ปรับระดับความเข้มให้ไม่แย่งความเด่นของข้อความตัวเลข */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.dash-home-status .dhs-item:hover::after {
    transform: scale(1.08) translate(-2px, -2px);
    opacity: 0.2;
}


.dash-home-status .dhs-item--1::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30,100 Q50,50 100,70 M40,100 Q60,45 100,55 M50,100 Q70,40 100,40 M60,100 Q80,35 100,25 M70,100 Q90,30 100,10' fill='none' stroke='%232ee6c5' stroke-width='1.5'/%3E%3C/svg%3E");
}
.dash-home-status .dhs-item--2::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30,100 Q50,50 100,70 M40,100 Q60,45 100,55 M50,100 Q70,40 100,40 M60,100 Q80,35 100,25 M70,100 Q90,30 100,10' fill='none' stroke='%239f8df5' stroke-width='1.5'/%3E%3C/svg%3E");
}
.dash-home-status .dhs-item--3::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M30,100 Q50,50 100,70 M40,100 Q60,45 100,55 M50,100 Q70,40 100,40 M60,100 Q80,35 100,25 M70,100 Q90,30 100,10' fill='none' stroke='%23ffb36b' stroke-width='1.5'/%3E%3C/svg%3E");
}



/* กล่องไอคอน */
.dash-home-status .dhs-item--icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* ป้องกันไอคอนบีบเบี้ยวตอนจอมือถือ */
}

.dash-home-status .dhs-item--1 .dhs-item--icon { background: linear-gradient(135deg, #1dd6c3, #28c7ff); }
.dash-home-status .dhs-item--2 .dhs-item--icon { background: linear-gradient(135deg, #9a8cff, #7c7ff5); }
.dash-home-status .dhs-item--3 .dhs-item--icon { background: linear-gradient(135deg, #2ba6ff, #1f8cff); }

.dash-home-status .dhs-item--icon-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* หัวข้อการ์ดด้านบน */
.dash-home-status .dhs-item--title {
    font-size: 13px;
    font-weight: 500;
    color: #8a96a3; /* สีเทามาตรฐานเว็บสมัยใหม่ อ่านง่ายไม่มืดและไม่อ่อนไป */
    margin-bottom: 4px;
    letter-spacing: 0.2px;
}

/* ตัวเลข/ข้อมูลแสดงผลหลัก */
.dash-home-status .dhs-item--text {
    font-size: 24px;       /* ปรับลงมาจาก 28px เล็กน้อย เพื่อรองรับตัวเลขหลักแสนหลักล้านไม่ให้ล้นการ์ด */
    font-weight: 700;       /* เพิ่มความหนาเด่นชัดเพื่อให้เห็นตัวเลขชัดเจนที่สุด */
    color: #1e293b;        /* สีเกือบดำที่เป็นมิตรกับสายตา */
    line-height: 1.2;
    letter-spacing: -0.5px;
}

/* ตัวหน่วยแสดงผล (เช่น คำว่า บาท) */
.dash-home-status .dhs-item--unit {
    font-size: 16px;       /* ทำหน่วยให้ตัวเล็กกว่าตัวเลขหลักเพื่อให้เกิด Visual Hierarchy */
    font-weight: 500;
    color: #64748b;
    margin-left: 6px;
}


@media (max-width: 768px) {
    .dash-home-status .dhs-item {
        padding: 16px;
        min-height: 95px;
    }
    .dash-home-status .dhs-item--body {
        gap: 14px;
    }
    .dash-home-status .dhs-item--icon {
        width: 42px;
        height: 42px;
        border-radius: 10px;
    }
    .dash-home-status .dhs-item--icon-img {
        width: 18px;
        height: 18px;
    }
    .dash-home-status .dhs-item--title {
        font-size: 12px;
    }
    .dash-home-status .dhs-item--text {
        font-size: 20px;
    }
    .dash-home-status .dhs-item--unit {
        font-size: 14px;
    }
    .dash-home-status .dhs-item::after {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 767.98px) {
    /* 1. บังคับให้โครงสร้าง Row จัดเรียงเป็นการปัดแนวนอน (Horizontal Scroll) */
    .dash-home-status > .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 12px !important;
        margin-left: -4px !important;
        margin-right: -4px !important;
        -webkit-overflow-scrolling: touch; /* ช่วยให้การปัดบน iOS ลื่นไหลขึ้น */
    }

    /* ซ่อนแถบ Scrollbar แข็งๆ ของระบบเพื่อความสวยงามสะอาดตา */
    .dash-home-status > .row::-webkit-scrollbar {
        height: 4px !important;
    }
    .dash-home-status > .row::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.1) !important;
        border-radius: 4px !important;
    }

    /* 2. กำหนดขนาดของการ์ดแต่ละใบไม่ให้หดตัว และมีความกว้างที่พอดีกับสายตา */
    .dash-home-status > .row > div {
        flex: 0 0 75% !important; /* การ์ดจะกว้าง 75% ของหน้าจอ ทำให้เห็นการ์ดถัดไปยื่นมานิดๆ เป็นกิมมิค */
        max-width: 75% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* 3. ปรับแต่งโครงสร้างภายในกล่องให้กระชับ เหมาะกับแนวนอน */
    .dash-home-status .dhs-item {
        padding: 14px 16px !important;
        min-height: 80px !important;
        text-align: left !important; /* เปลี่ยนกลับเป็นชิดซ้ายเพื่อให้อ่านง่ายในแนวนอน */
        display: flex !important;
        align-items: center !important;
    }

    .dash-home-status .dhs-item--body {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .dash-home-status .dhs-item--content {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
    }

    .dash-home-status .dhs-item .dhs-item--title {
        font-size: 11px !important;
        margin-bottom: 2px !important;
    }

    .dash-home-status .dhs-item .dhs-item--text {
        font-size: 18px !important;
        display: flex !important;
        align-items: baseline !important;
    }
    
    .dash-home-status .dhs-item--unit {
        font-size: 12px !important;
        margin-left: 4px !important;
    }
}

.w-100-custom {
      width: 100% !important;
      max-width: 320px; 
      display: block;
      margin: 0 auto 15px auto; 
      text-align: center;
      border-radius: 10px; 
      padding: 10px 20px;
   }

.order-side {
	margin-top: 0px
}

.simple-title {
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .4;
	color: #464646;
	position: relative;
	padding-bottom: 14px;
}

.simple-title::after {
	content: '';
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 2px;
	width: 76px;
	background: #315DFF;
}

.form-group .form-control {
	border: none;
	outline: none;
	background-color: #F8F7F7;
	color: #464E77;
	font-size: 15px;
	font-weight: 500;
	min-height: 52px;
	overflow: hidden;
	padding: 10px 18px;
	box-shadow: none;
}

.form-group .form-control::-webkit-input-placeholder {
	color: rgba(70, 78, 119, 0.8);
}

.form-group .form-control:-ms-input-placeholder {
	color: rgba(70, 78, 119, 0.8);
}

.form-group .form-control::-ms-input-placeholder {
	color: rgba(70, 78, 119, 0.8);
}

.form-group .form-control::placeholder {
	color: rgba(70, 78, 119, 0.8);
}

.form-group.fg-ly .input-group .input-group-prepend .input-group-text {
	background: #FF9B5C !important;
}

.form-group.fg-lb .input-group .input-group-prepend .input-group-text {
	background: #214AF0 !important;
}

.form-group .input-group .input-group-prepend .input-group-text {
	background: rgb(255, 255, 255);
	background: linear-gradient(230deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 100%);
}

.form-group .input-group .input-group-prepend .input-group-text i {
	width: 100%;
	text-align: center;
}

.form-group label {
	color: #464E77;
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 12px;
}

.form-group.fg-for-login label {
	color: #fff;
}

.form-group.fg-for-login .form-control {
	background-color: #edeef2;
	color: #444;
}

.form-group.fg-for-login .form-control::-webkit-input-placeholder {
	color: rgba(0, 0, 0, 0.6);
}

.form-group.fg-for-login .form-control:-ms-input-placeholder {
	color: rgba(0, 0, 0, 0.6);
}

.form-group.fg-for-login .form-control::-ms-input-placeholder {
	color: rgba(0, 0, 0, 0.6);
}

.form-group.fg-for-login .form-control::placeholder {
	color: rgba(0, 0, 0, 0.6);
}

.profile-box {
	padding: 54px 30px 30px;
	color: #fff;
	border-radius: 20px;
	margin-bottom: 30px;
}

.profile-box .pb-title {
	font-size: 24px;
	color: #fff;
	letter-spacing: .2px;
	margin-bottom: 8px;
}

.profile-box .pb-text {
	font-size: 16px;
	line-height: 26px;
	color: #fff;
	letter-spacing: .2px;
	margin-bottom: 10px;
}

.profile-box.box-1 {
	background: -webkit-gradient(linear, left top, right top, from(#FFB16F), to(#FF8A4D)) #FF8A4D;
	background: linear-gradient(to right, #FFB16F, #FF8A4D) #FF8A4D;
}

.profile-box.box-1 .btn {
	color: #FF9556 !important;
}

.profile-box.box-2 {
	background: -webkit-gradient(linear, left top, right top, from(#185BDC), to(#315DFF)) #185BDC;
	background: linear-gradient(to right, #185BDC, #315DFF) #185BDC;
}

.profile-box.box-2 .btn {
	color: #464E77 !important;
}

.alert {
	border: none;
	outline: none;
	font-size: 14px;
	font-weight: 400;
	padding: 20px 30px;
	border-radius: 12px;
}

.alert.alert-success {
	background-color: #C8F2DD;
	color: #24CA7A !important;
}

.alert.alert-danger {
	background-color: #ec3e7240;
	color: #fb3f77;
}

.btn.btn-primary {
background: rgb(14, 76, 253);
	background: linear-gradient(230deg, rgba(14, 76, 253, 1) 0%, rgba(106, 142, 255, 1) 100%);
}

.btn.btn-light {
	color: #315DFF;
	background: #fff;
}

.btn.btn-secondary {
	background: #369afd;
}

.btn.btn-secondary:hover {
	background: #006eff;
	transition: 300ms all
}

.btn.btn-purple {
	background: linear-gradient(90deg, var(--c1, rgb(236, 7, 199)), var(--c2, rgb(188, 0, 158)) 51%, var(--c1, rgb(19, 139, 255))) var(--x, 0)/ 200%;
	color: #fff
}

.btn.btn-lg {
	font-size: 17px;
	font-weight: 500;
}

.btn.btn-outline {
	padding: 12px 30px;
	border: 1px solid #b9b9b9;
	color: #000000;
	background: transparent;
}

.btn.btn-outline:hover {
	border-color: transparent;
	background: transparent;
	color: #000000;
}

.btn-signup-glow{
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff !important;
    border: 1px solid #a855f7;
    box-shadow:
        0 0 10px rgba(168, 85, 247, 0.7),
        0 0 20px rgba(168, 85, 247, 0.5),
        0 0 40px rgba(168, 85, 247, 0.3);
    transition: all 0.3s ease;
}

.btn-signup-glow:hover{
    background: linear-gradient(135deg, #9333ea, #6d28d9);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow:
        0 0 15px rgba(168, 85, 247, 0.9),
        0 0 30px rgba(168, 85, 247, 0.7),
        0 0 50px rgba(168, 85, 247, 0.5);
}

.tab-pane .notification {
	padding: 0 0 20px 0;
	height: 500px
}

.tab-pane .notification li {
	display: flex;
	align-items: center;
	border: 1px solid #f5f5f5;
	border-bottom-color: #dadada;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 15px;
	background: #F8F7F7
}

.tab-pane .notification li .icons i {
	font-size: 25px;
	margin-right: 10px;
}

.tab-pane .notification li .date {
	color: #ccc;
	font-size: 14px;
	margin-bottom: 10px;
}

.tab-pane .notification li .title {
	font-size: 16px;
	font-weight: 500;
}

.tab-pane .notification li .title a {
	color: #464E77
}

.tab-pane .notification li .text {
	color: #464E77;
	font-size: 14px;
	font-weight: 500;
	margin-top: 10px;
}

.home-body {
	background: #F7F8FC;
	max-width: 100%;
	overflow-x: hidden;
}

.header {
	height: 100px;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 1000;
	margin-top: 0px;
}

.header .site-icon-container {
	display: inline-block;
}

.header .site-icon-container img {
	max-height: 54px;
	width: auto;
}

.header .site-name img {
	height: 75px;
}

.header .header-menu ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.header .header-menu ul li {
	display: inline-block;
	padding: 0 25px;
}

.header .header-menu ul li.active a {
	color: #5c5a5ae6 !important;
}

.header .header-menu ul li a {
	color: #5c5a5ae6;
	text-decoration: none;
	font-size: 15px;
	display: block;
	font-weight: 600;
	height: 100px;
	line-height: 100px;
	position: relative;
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

.header .header-menu ul li a:hover {
	color: #5c5a5ae6;
}

.container {
	max-width: 1200px;
}

.text-primary {
	color: #3E3F5E !important;
}

.services-search {
	position: relative;
}

.services-search .ss-input {
	position: relative;
	height: 40px;
	border-radius: 5px;
	background: #F8F8F8;
	border: 1px solid #f8f8f8;
	font-size: 15px;
	font-weight: 500;
	width: 100%;
	color: #C9C9C9;
	padding: 0 30px;
	-webkit-transition: .2s ease;
	transition: .2s ease;
}

.services-search .ss-input:focus {
	border: 1px solid #ebe8e8;
	outline: none;
}

.input-group-btn .dropdown-menu {
	left: auto;
	right: 0;
	width: 350px;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
	box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
}

.input-group-btn .dropdown-menu>li>a {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	text-decoration: none
}

.input-group-btn .dropdown-menu>li>a:hover {
	color: #185bdc
}

.table td {
	border-bottom: 2px solid #E5E7E8;
	vertical-align: middle;
}

.table td,
.table th {
	border-top: none;
}

.table thead {
	font-size: 14px;
	color: #576591;
	font-weight: 600;
}

.table tbody {
	font-size: 16px;
	color: #464E77;
	letter-spacing: .2px;
	font-weight: 400;
}

.services-header {
	border: none;
}

.services-header td {
	border: none;
}

.services-header .services-title {
font-weight: 700;
    font-size: 16px;
    color: #0f172a;
}

.flag-icon {
    width: 18px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    border-radius: 2px;
}

.filter-btns {
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: -4px;
	margin-right: -4px;
}

.filter-btns>div {
	padding-left: 4px;
	padding-right: 4px;
}

.filter-btns .filter-btn {
	padding: 12px 18px;
	font-size: 12px;
	color: #646A8C;
	font-weight: 500;
	margin: 6px 0;
	display: block;
	border-radius: 6px;
	background: #F8F8F8;
	-webkit-transition: .1s ease;
	transition: .1s ease;
	text-decoration: none !important;
}

.filter-btns .filter-btn:hover {
	background: #E2E8F5;
}

.filter-btns .filter-btn.active {
	background: -webkit-gradient(linear, left top, right top, from(#2341BB), to(#214BF3)) #214BF3;
	background: linear-gradient(to right, #2341BB, #214BF3) #214BF3;
	color: #fff;
}

.filter-btns .filter-btn .icon {
	margin-right: 8px;
	font-size: 14px;
}

.filter-search {
	border-radius: 6px;
	background: #02e1ff;
	color: #fff;
	position: relative;
	display: block;
	margin: 6px 0;
}

.filter-search:focus-within {
	outline: 2px solid #214BF3;
}

.filter-search .fise-input {
	outline: none;
	border: none;
	background: transparent;
	padding: 12px 18px;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	width: calc(100% - 41px);
	position: relative;
}

.filter-search .fise-input::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.9);
}

.filter-search .fise-input:-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.9);
}

.filter-search .fise-input::-ms-input-placeholder {
	color: rgba(255, 255, 255, 0.9);
}

.filter-search .fise-input::placeholder {
	color: rgba(255, 255, 255, 0.9);
}

.filter-search .fise-btn {
	border: none;
	outline: none;
	height: 100%;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 40px;
	text-align: center;
	color: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: transparent;
}

.filter-search .fise-btn i {
	height: 20px;
}

.addf-text {
	font-size: 16px;
	letter-spacing: .2px;
	line-height: 27px;
	font-weight: 500;
	color: #A8A8A8;
}

.addf-text p {
	margin-bottom: 1.8rem;
}

.addf-text .dear-text {
	font-size: 17px;
	color: #373737;
	font-weight: 600;
}

.addf-warning {
	font-size: 12px;
	color: #616685;
	letter-spacing: .8px;
}

.addf-warning span {
	color: #1B5BE0;
	font-weight: 600;
}

.addf-warning i {
	color: #1B5BE0;
	font-size: 16px;
	margin-right: 4px;
}

.faq-ss-tabs .home-ss-tab {
	position: relative;
	cursor: pointer;
	background: transparent;
	color: #151722;
	background-color: #fff;
	padding: 28px 20px 28px 20px;
	-webkit-transition: .2s ease;
	transition: .2s ease;
	margin-bottom: 14px;
	border-radius: 12px;
}

.faq-ss-tabs .home-ss-tab .fa-minus {
	display: none;
}

.faq-ss-tabs .home-ss-tab.active {
	background: #151722;
	color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head {
	color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .ss-tab-head .right-p {
	color: #fff;
}

.faq-ss-tabs .home-ss-tab.active .fa-minus {
	display: block;
}

.faq-ss-tabs .home-ss-tab.active .fa-plus {
	display: none;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head {
	font-size: 20px;
	font-weight: 500;
	color: #151722;
}

.faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
	color: #151722;
	font-size: 24px;
	height: 30px;
	line-height: 30px;
}

.faq-ss-tabs .home-ss-tab .ss-tab-content {
	display: none;
	padding-top: 12px;
	color: #fff;
	font-size: 16px;
	line-height: 170%;
	padding-bottom: 8px;
}

.tos-navs .nav-item {
	display: inline-block;
}

.tos-navs .nav-item.nav-link {
	-webkit-transition: .2s ease;
	transition: .2s ease;
	text-align: center;
	margin: 0 10px;
	position: relative;
	line-height: 30px;
	font-size: 16px;
	min-width: 200px;
	font-weight: 600;
	padding: 18px 23px;
	margin-bottom: 20px;
	background-color: #E5EEFF;
	color: #185bdc;
	border-radius: 5px;
	font-size: 600;
}

.tos-navs .nav-item.nav-link.active {
	background-color: #185bdc;
	color: #fff;
}

.tos-navs .nav-item.nav-link:hover {
	-webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.14);
	box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.14);
}

pre.code {
	border-radius: 10px;
	background-color: #dde9ff;
	color: #185bdc;
	padding: 24px;
}

@media (max-width: 767.98px) {
	.container-fluid {
		margin-bottom: 100px;
		padding: 0 15px !important;
	}
	.table-mobile-cards thead {
		display: none;
	}
	.table-mobile-cards tr {
		border: none;
	}
	.table-mobile-cards tr.table-mobile-card {
		display: block;
		border-radius: 10px;
		border: 1px solid #eee;
		padding: 14px 24px;
		margin-bottom: 24px;
		margin-left: 15px;
		margin-right: 15px;
		background: #fafafa;
	}
	.table-mobile-cards tr.table-mobile-card td {
		display: block;
		border: none;
		padding: 0px;
		font-size: 13px;
	}
	.table-mobile-cards tr.table-mobile-card td+td {
		margin-top: 12px;
	}
	.table-mobile-cards tr.table-mobile-card td::before {
		content: attr(data-title);
		font-size: 14px;
		color: #000;
		font-weight: 500;
		display: block;
	}
	.app-sidebar {
		left: -100px;
	}
	.app-sidebar.sidebar-inact {
		width: 280px;
		left: 0px;
	}
	.app-sidebar.sidebar-inact .close-sidebar-btn {
		display: block;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-sm {
		display: none;
	}
	.app-sidebar.sidebar-inact .app-user {
		padding: 40px 10px !important;
	}
	.app-sidebar.sidebar-inact .app-user .user-name {
		display: block;
	}
	.app-sidebar.sidebar-inact .app-user .user-balance {
		display: block;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link {
		padding: 13px 18px;
		text-align: left;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon {
		width: 24px;
		height: 24px;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-text {
		display: inline-block;
	}
	.app-sidebar .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar .sidebar-header .logo-sm {
		display: inline-block;
	}
	.app-sidebar .app-user {
		padding: 0px 10px !important;
	}
	.app-sidebar .app-user .user-avatar>.the-avatar {
		width: 40px !important;
		height: 40px !important;
	}
	.app-sidebar .app-user .user-avatar .avatar-badge {
		display: none !important;
	}
	.app-sidebar .app-user .user-avatar .the-avatar-bg-bt {
		display: none !important;
	}
	.app-sidebar .app-user .user-avatar .the-avatar-bg {
		display: none !important;
	}
	.app-sidebar .app-user .user-name {
		display: none;
	}
	.app-sidebar .app-user .user-balance {
		display: none;
	}
	.app-sidebar .sidebar-menu li a.menu-link {
		padding: 13px 0px;
		text-align: center;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
		width: 100%;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-text {
		display: none;
	}
	.app-content {
		padding-left: 0px !important;
	}
	.app-header {
		left: 0px !important;
	}
	.dash-home-status .dhs-item {
		padding: 10px;
		text-align: center;
		border-radius: 10px
	}
	.dash-home-status .dhs-item .dhs-item--title {
		font-size: 12px
	}
	.dash-home-status .dhs-item .dhs-item--text {
		font-size: 20px
	}
	.top-notice-content p {
		font-size: 12px
	}
	.order-side {
		margin-top: 0
	}
	.d-card .d-card-body {
		padding: 15px
	}
	.p0 {
		padding: 0!important
	}
	.services-search {
		padding: 15px
	}
	.input-group-btn .dropdown-menu>li>a {
		font-size: 12px
	}
	#orderDetail {
		padding: 15px
	}
	#orderDetail .card .card-header h4 {
		font-size: 11px!important
	}
	#orderDetail .card .ordNumber {
		font-size: 12px;
		padding: 5px 15px
	}
	#orderDetail .card .ordStatus {
		font-size: 11px
	}
	#orderDetail .card small {
		font-size: 11px
	}
	#orderDetail .card-body ul li {
		font-size: 11px!important;
	}
	.orderNav {
		padding: 15px
	}
	.orderNav li {
		width: 49%;
		margin: 0 1%;
		margin-right: auto!important
	}
	.dash-list {
		margin-top: 0!important
	}
	.orders-btn {
		padding-bottom: 0!important
	}
	.app-header {
		height: 75px
	}
	.app-header .row-100 {
		height: 75px
	}
	.d-card .d-card-head {
		font-size: 14px;
		margin: auto
	}
	.text-style-2 {
		font-size: 12px
	}
	.faq-ss-tabs .home-ss-tab .ss-tab-head {
		font-size: 15px;
		font-weight: 400
	}
	.faq-ss-tabs .home-ss-tab .ss-tab-content {
		font-size: 13px
	}
	.app-sidebar.sidebar-inact .sidebar-header {
		padding-bottom: 0
	}
	.app-sidebar .sidebar-content {
		padding: 0 0 20px 0
	}
	.app-sidebar .sidebar-menu {
		padding-bottom: 50px;
		margin-top: 25px;
	}
	.tos-navs .nav-item.nav-link {
		width: 100%
	}
}

/* MOBILE CENTER */
@media (max-width: 991px) {

    .hero-badge {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-title {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-subtitle {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    /* BUTTONS */
    .hero-buttons {
        justify-content: center;
    }

    .btn-primary-soft,
    .btn-outline-soft {
        width: auto;
    }

    /* STATS */
    .d-flex.flex-wrap.align-items-center {
        justify-content: center;
        text-align: center;
    }

    .stats-pill {
        justify-content: center;
    }

    /* PLATFORM */
    .mt-3 {
        text-align: center;
    }

    .platform-pill {
        justify-content: center;
        margin-left: 4px;
        margin-right: 4px;
    }

	.hero-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .btn-primary-soft {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
}

/* SMALL MOBILE */
@media (max-width: 576px) {

    .hero-title {
        font-size: 2rem;
        line-height: 1.12;
    }

    .hero-subtitle {
        font-size: 0.92rem;
        line-height: 1.8;
    }

    .hero-buttons {
        gap: 12px;
    }

    .platform-pill {
        font-size: 0.72rem;
        padding: 9px 14px;
    }
}

@media (max-width: 1199.98px) {
	.app-sidebar .sidebar-header .sh-bg {
		background: transparent
	}
	.register-page .register-page-content {
		padding: 25px 0 100px 0!important
	}
	.register-left .rl-text {
		margin-bottom: 25px!important
	}
	.home-head .hl-title {
		font-size: 42px!important
	}
	.home-head {
		padding: 100px 0 0!important
	}
	.home-head,
	.ha-item {
		overflow: hidden
	}
	.container-fluid {
		padding: 0 30px;
	}
	.app-sidebar {
		width: 80px;
	}
	.app-sidebar.sidebar-inact {
		width: 280px;
	}
	.app-sidebar.sidebar-inact .close-sidebar-btn {
		display: block;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-sm {
		display: none;
	}
	.app-sidebar.sidebar-inact .app-user {
		padding: 0 10px !important;
	}
	.app-sidebar.sidebar-inact .app-user .user-name {
		display: block;
	}
	.app-sidebar.sidebar-inact .app-user .user-balance {
		display: block;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link {
		padding: 13px 18px;
		text-align: left;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon {
		width: 24px;
		height: 24px;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-text {
		display: inline-block;
	}
	.app-sidebar .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar .sidebar-header .logo-sm {
		display: inline-block;
	}
	.app-sidebar .app-user {
		padding: 0px 10px !important;
	}
	.app-sidebar .app-user .user-name {
		display: none;
	}
	.app-sidebar .app-user .user-balance {
		display: none;
	}
	.app-sidebar .sidebar-menu li a.menu-link {
		padding: 13px 0px;
		text-align: center;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-icon {
		width: 100%;
	}
	.app-sidebar .sidebar-menu li a.menu-link .menu-text {
		display: none;
	}
	.app-content {
		padding-left: 80px;
	}
	.app-header {
		left: 80px;
	}
}

@media (max-width: 1500.98px) {
	.container-fluid {
		padding: 0px 25px;
	}
}

@media (min-width: 1199.98px) {
	.app-sidebar.sidebar-inact {
		width: 80px;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-lg {
		display: none;
	}
	.app-sidebar.sidebar-inact .sidebar-header .logo-sm {
		display: inline-block;
	}
	.app-sidebar.sidebar-inact .app-user {
		padding: 0px 10px !important;
	}
	.app-sidebar.sidebar-inact .app-user .user-name {
		display: none;
	}
	.app-sidebar.sidebar-inact .app-user .user-balance {
		display: none;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link {
		padding: 13px 0px;
		text-align: center;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-icon {
		width: 100%;
	}
	.app-sidebar.sidebar-inact .sidebar-menu li a.menu-link .menu-text {
		display: none;
	}
	.app-content.sidebar-inact {
		padding-left: 80px;
	}
	.app-header.sidebar-inact {
		left: 80px;
	}
}

.dropdown-menu {
	width: 100%;
	padding: 0;
	max-height: 43.6vh;
	overflow-y: scroll;
	border: none!important;
	margin-top: 15px
}

#serviceItem,
#categoryItem {
	white-space: inherit;
	padding: 12px;
	font-weight: 500;
	font-size: 14px;
	background: #F8F7F7;
	border-bottom: 1px solid #fff;
	color: #464E77;
	text-align: left;
	width: 100%
}

#serviceItem:hover,
#categoryItem:hover {
	background: #fff
}

#order-category,
#order-services {
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 85%;
	overflow-x: hidden;
	position: absolute;
	line-height: 15px;
	height: 24px;
	font-size: 14px;
}

.dropdown button {
	background: #fff;
	border: 1px solid #fff;
	border-top: none!important;
	color: #081521
}

.dropdown button:hover,
.dropdown button:focus {
	outline: none;
	box-shadow: none;
}

.dropdown-menu {
    transform: translate3d(5px, 35px, 0px)!important;
}

.fab.fa-instagram {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);
	background-clip: text;
	font-size: 14px;
	padding: 2.4px;
	border-radius: 5px;
	color: transparent;
	font-weight: lighter;
	margin-right: 10px;
}

.fab.fa-facebook-square {
	background: #207eff;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 18px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	border-radius: 5px;
	margin-right: 10px;
}

.fab.fa-youtube {
	background: #ff0042;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-twitter {
	background: #1da1f2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-telegram-plane {
	background: #2b9fd2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-soundcloud {
	background: #ff5836;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-spotify {
	background: #62ffa2;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-twitch {
	background: #e600ff;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-pinterest-p {
	background: #ff5858;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fa.fa-music {
	background: #f8004d;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-tiktok {
	background: #f8004d;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-globe {
	background: #1a1a1a;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fas.fa-stream {
	background: #ccc;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.fab.fa-hotjar {
	background: #ff0000;
	background-clip: text;
	-webkit-background-clip: text;
	font-size: 17px;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	margin-right: 10px;
}

.nav-pills.fastside .nav-link {
	background: #E5EEFF;
	color: #2258BF;
	text-align: center;
	padding: 15px 0;
	border-radius: 18px 0 0 0
}

.nav-pills.fastside .nav-link.second {
	border-radius: 0 18px 0 0!important
}

.nav-pills.fastside .nav-link.active,
.nav-pills .show>.nav-link {
background: rgb(1 210 255);
    background: linear-gradient(230deg, rgb(0 209 255) 0%, rgb(255 255 255) 100%);

}


.panel-body {
	background-color: #F8F7F7;
	color: #464E77;
	font-size: 14px;
	border-radius: 18px;
	padding: 10px
}

.app-navbar {
	display: none;
	height: 50px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	background: #fff;
	position: fixed;
	z-index: 1000;
	padding: 0;
	-webkit-box-shadow: 0 5px 50px rgb(200 200 200 / 100%);
	box-shadow: 0 5px 50px rgb(200 200 200 / 100%);
}

.app-navbar>.row {
	height: 70px;
}

.app-navbar .navbar-mid-icon {
	margin-top: -40px;
	margin-left: -5px
}

.app-navbar a.active .navbar-icon {
	-webkit-filter: inherit;
	filter: inherit;
}

.app-navbar a.active .navbar-texts {
	color: #185BDC;
}

.app-navbar a.active i {
	color: #185BDC
}

.app-navbar i {
	color: #202020
}

.app-navbar .navbar-texts {
	font-size: 10px;
	font-weight: 500;
	color: #202020;
	display: block;
	margin-top: 6px;
}

.sDetayBtn {
    background: linear-gradient(135deg, #4da3ff, #2979ff);
    color: #ffffff !important;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 10px rgba(41, 121, 255, 0.2);
    transition: all 0.2s ease-in-out;
    display: inline-block;
    text-align: center;
}

.modal-header {
	border-radius: 16px 16px 0 0;
}

.modal-header h4 {
	font-size: 13px;
	color: #fff
}

.modal-body {
	font-size: 13px;
}

/* กล่องหลัก */
.card {
    border: 1px solid #d9dee7;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    background: #ffffff;

}

/* ส่วนหัว */
.card-header {
    background: #f8f9fb;
    border-bottom: 1px solid #d9dee7;
    padding: 20px 20px;
}

.card-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* เนื้อหา */
.card-body {
    padding: 15px 30px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}



/* หัวข้อ "โปรดอ่าน" */
.card-body h4 .text-info {
    color: #1da1f2 !important;
    font-size: 18px;
    font-weight: 500;
}

/* หัวข้อ "ต้องอ่าน!" */
.card-body h4[style],
.card-body h4 span[style*="rgb(255, 0, 0)"] {
    color: #ff0000 !important;
    font-size: 15px;
    font-weight: 500;
}

/* หัวข้อ "คำเตือน !!" */
.card-body h4 .fa-exclamation-triangle + b {
    color: #ff3300 !important;
    font-size: 15px;
    font-weight: 600;
}

/* ไอคอน */
.card-body h4 i {
    margin-right: 8px;
    font-size: 20px;
    vertical-align: middle;
}

/* รายการ */
.card-body ul,
.card-body ol {
    margin: 0 0 20px 0;
    padding-left: 28px;
}

.card-body li {
    margin-bottom: 6px;
    line-height: 1.8;
}

/* รายการลำดับเลขด้านใน */
.card-body ol {
    margin-top: 8px;
    padding-left: 30px;
}

/* ลิงก์ */
.card-body a {
    color: #1e5aa8;
    text-decoration: none;
    font-weight: 600;
}

.card-body a:hover {
    text-decoration: underline;
}

/* ข้อความเน้นสีแดง */
.card-body span[style*="color:red"],
.card-body b[style*="color: #FF3300"] {
    font-weight: 600;
}

/* ข้อความสีส้ม เช่น @social-follow */
.card-body span[style*="color:#fd7e14"] {
    font-weight: 500;
    color: #f36c21 !important;
}

/* เว้นระยะระหว่างแต่ละส่วน */
.card-body h4 + ul,
.card-body h4 + p {
    margin-top: 10px;
}

/* Responsive สำหรับมือถือ */
@media (max-width: 768px) {
    .card-body {
        padding: 20px;
        font-size: 13px;
        line-height: 1.7;
    }

    .card-body h4,
    .card-body h4 .text-info,
    .card-body h4 .fa-exclamation-triangle + b {
        font-size: 22px;
    }

    .card-body h4 i {
        font-size: 20px;
    }

    .card-body ul,
    .card-body ol {
        padding-left: 22px;
    }
}

#orderDetail .card {
	margin-bottom: 10px;
	border: none
}

#orderDetail .card .card-header {
	padding: 0;
	border: none;
	background-color: #f8f8f8;
	border-radius: 10px;
}

#orderDetail .card .card-header h4 {
	font-size: 14px;
	color: #185BDC
}

#orderDetail .card .card-header .btn-header-link {
	color: #fff;
	display: block;
	text-align: left;
	cursor: pointer;
	color: #222;
	border: none;
	padding: 14px 30px;
	text-decoration: none
}

#orderDetail .card .card-header .btn-header-link:after {
	content: "\f107";
	font-family: 'Font Awesome 5 Pro';
	font-weight: 900;
	position: absolute;
	right: 10px;
	top: 25px
}

#orderDetail .card .card-header .btn-header-link.collapsed:after {
	content: "\f106";
}

#orderDetail .card .collapsing {
	background: #fff;
}

#orderDetail .card .collapse.show {
	background: #fff;
	line-height: 24px;
	color: #222;
	border: 1px solid #EFEFEF;
	border-top: 0;
	border-radius: 10px
}

#orderDetail .card-body {
	padding: 5px 15px
}

#orderDetail .card-body ul {
	padding-left: 0
}

#orderDetail .card-body ul li {
	list-style-type: none;
	font-size: 13px
}

.orderNav li a {
	background-color: #e9e9e9;
	color: #202020;
	padding: 12px 8px;
	font-size: 11px;
	border: none;
	outline: none;
	border-radius: 5px;
	cursor: pointer;
	-webkit-transition: .15s ease;
	transition: .15s ease;
	min-height: 40px;
	display: inline-block;
	margin-bottom: 4px;
	width: 100%;
	text-decoration: none
}

.orderNav li a.active,
.orderNav li a:hover {
    background: rgb(1 210 255);
    background: linear-gradient(230deg, rgb(0 209 255) 0%, rgb(255 255 255) 100%);

}

.orderNav li:last-child {
	margin-left: auto;
}

.dfb-search {
	background-color: #e9e9e9;
	color: #fff;
	font-size: 11px;
	border: none;
	outline: none;
	border-radius: 5px;
	cursor: pointer;
	-webkit-transition: .15s ease;
	transition: .15s ease;
	min-height: 40px;
	position: relative;
	overflow: hidden;
}

.dfb-search .dfb-input {
	width: calc(100% - 40px);
	background: transparent;
	border: none;
	outline: none;
	height: 40px;
	color: #202020;
	padding: 0 14px;
	min-width: 250px
}

.dfb-search i {
	color: #fff
}

.dfb-search .dfb-submit {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border: none;
background: rgb(1 210 255);
    background: linear-gradient(230deg, rgb(0 209 255) 0%, rgb(255 255 255) 100%);

}

.ticket-message-right .ticket-message {
	background: rgb(255, 171, 90, 0.1);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 15px;
}

.ticket-message-left .ticket-message {
	background: rgb(27, 91, 224, 0.1);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	padding: 15px;
}

.ref-item {
	border-bottom: 1px solid #f5f5f5;
	padding: 15px 0
}

.ref-item.d-blue {
	background: #E5EEFF;
	border-radius: 25px;
	padding: 15px 25px;
	color: #2258BF
}

.ref-item i {
	color: #FFAB5A;
	font-size: 20px;
}

.ref-item .the-title {
	font-weight: bold
}

.rep-title h3 {
	font-size: 18px;
	font-weight: 600
}

#sssTab .faq-ss-tabs .home-ss-tab {
	padding: 10px 20px 10px 20px;
	border-bottom: 1px solid #f5f5f5
}

#sssTab .home-ss-tab .col {
	font-size: 16px
}

#sssTab .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
	font-size: 16px
}

.noorders {
	text-align: center
}

.noorders .smiley {
	max-width: 175px
}


/* dark mod */

.darkMode {
	background: transparent;
	box-shadow: none;
	border: none;
	outline: 0;
}

.darkMode:focus {
	background: transparent;
	box-shadow: none;
	border: none;
	outline: 0
}

.darkMode i {
	height: 34px;
	display: inline-block;
	width: 34px;
	font-size: 19px;
	line-height: 34px;
	text-align: center;
	-webkit-transition: .14s ease;
	transition: .14s ease;
}

.darkMode i.fa-moon {
	color: rgba(255, 106, 39, 1)
}

.darkMode i.fa-sun span {
	color: #fff
}

.darkMode i.fa-sun {
	color: #ffbf00
}

.darkMode i span {
	color: #404040
}

body i.fa-moon,
body.light i.fa-moon {
	display: block
}

body i.fa-sun,
body.light i.fa-sun {
	display: none
}

body.dark i.fa-moon {
	display: none
}

body.dark i.fa-sun {
	display: block
}

body.dark,
body.dark .app-content {
	background: #0f1017
}

body.dark .app-sidebar .sidebar-header .logo-lg,
body.dark .app-sidebar .sidebar-header .logo-sm {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

body.dark .app-logo.mobiles .logo-lg {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

body.dark .app-sidebar {
	background: #151722
}

body.dark .app-header {
	background: #151722;
	border-left: 1px solid #0f1017;
}

body.dark .app-sidebar .sidebar-menu li a.menu-link {
	color: #efefef
}

body.dark .app-sidebar .sidebar-menu li.active>a.menu-link {
	background: #162851;
	color: #4088ff;
	font-weight: 600;
}

body.dark .app-sidebar .sidebar-menu li a.menu-link:hover {
	background: #162851;
	color: #4088ff;
}

body.dark .app-sidebar .sidebar-header .app-user .user-name {
	color: #7f89b7
}

body.dark .app-navbar {
	background: #162851;
	-webkit-box-shadow: 0 5px 50px rgb(46 48 63);
	box-shadow: 0 5px 50px rgb(46 48 63);
}

body.dark .app-navbar i,
body.dark .app-navbar .navbar-texts {
	color: #fff;
}

body.dark .app-navbar a.active i,
body.dark .app-navbar a.active .navbar-texts {
	color: #2c5df8;
}

body.dark .app-header .hea-ann-title {
	background: #11336c;
}

body.dark .close-sidebar-btn {
	background: #151722;
	border-color: #0f1017;
}

body.dark .d-card {
	background: #151722;
	color: #fff
}

body.dark .form-group .form-control,
body.dark .panel-body {
	background: #13151e;
	color: #7f89b7
}

body.dark .form-group label {
	color: #fff
}

body.dark .nav-pills.fastside .nav-link {
	background: #162851;
	color: #3d80ff
}

body.dark .nav-pills.fastside .nav-link.active,
body.dark .nav-pills .show>.nav-link {
	background: #11336c;
	color: #fff
}

body.dark .tab-pane .notification li {
	background: #0f1017;
	border-color: #0f1017
}

body.dark .tab-pane .notification li .text,
body.dark .tab-pane .notification li .title a {
	color: #7f89b7
}

body.dark .tab-pane .notification li .date {
	color: #464E77
}

body.dark #serviceItem,
body.dark #categoryItem {
	background: #13151e;
	color: #7f89b7;
	border-color: #232842
}

body.dark #serviceItem:hover,
body.dark #categoryItem:hover {
	background: #232842;
}

body.dark .table td,
body.dark .table thead th {
	border-color: #0f1017
}

body.dark .table tbody {
	color: #fff
}

body.dark .services-search .ss-input {
	background: #0f1017;
	border-color: #0f1017
}

body.dark .input-group-btn .dropdown-menu {
	background: #0f1017;
}

body.dark .input-group-btn .dropdown-menu a {
	color: #7f89b7
}

@media (max-width: 767.98px) {
	body.dark .table-mobile-cards tr.table-mobile-card {
		background: #0f1017;
		border-color: #232842
	}
}

body.dark .table-mobile-cards tr.table-mobile-card td::before {
	color: #fff
}

body.dark .form-group .input-group .input-group-prepend .input-group-text {
	background: #162851
}

body.dark .orderNav li a {
	background: #162851;
	color: #3d80ff
}

body.dark .orderNav li a.active,
body.dark .orderNav li a:hover {
	background: #11336c;
	color: #fff
}

body.dark .dfb-search .dfb-input {
	background: #0f1017;
	color: #fff;
}

body.dark .dfb-search .dfb-submit {
	background: #11336c
}

body.dark .card {
	background: #0f1017;
	border-radius: 10px!important
}

body.dark #orderDetail .card .card-header {
	background: #0f1017;
}

body.dark #orderDetail .card .card-header .ordNumber {
	color: #fff
}

body.dark #orderDetail .card .card-header small {
	color: #7f89b7
}

body.dark #orderDetail .card .card-header .btn-header-link:after {
	color: #7f89b7
}

body.dark #orderDetail .card-body,
body.dark #orderDetail .card .collapse.show {
	background: #0f1017;
	color: #fff;
	border: transparent
}

body.dark .ref-item,
body.dark .table-bordered {
	border-color: #0f1017
}

body.dark .ref-item.d-blue {
	background: #162851;
	color: #fff
}

body.dark .ref-item i {
	color: #fff
}

body.dark .d-card .d-card-head {
	color: #7f89b7
}

body.dark .dc-blue {
	background: -webkit-gradient(linear, left top, right top, from(#185BDC), to(#315DFF)) #185BDC;
	background: linear-gradient(to right, #185BDC, #315DFF) #185BDC;
	color: #fff;
}

body.dark .dc-orange {
	background: -webkit-gradient(linear, left top, right top, from(#f25a3c), to(#ff7f40)) #ff7f40;
	background: linear-gradient(to right, #f25a3c, #ff7f40) #ff7f40;
	color: #fff;
}

body.dark pre.code {
	background: #162851;
	color: #4088ff;
}

body.dark .faq-ss-tabs .home-ss-tab {
	background: #151722;
}

body.dark .faq-ss-tabs .home-ss-tab .col {
	color: #fff!important
}

body.dark .faq-ss-tabs .home-ss-tab .ss-tab-head .right-p {
	color: #162851
}

body.dark .modal-body,
body.dark .modal-footer {
	background: #0f1017;
	color: #7f89b7;
}

body.dark .modal-header,
body.dark .modal-footer {
	border-color: #232842
}

body.dark .card-box-top p {
	color: #fff
}

body.dark .sDetayBtn {
	background: #162851;
	color: #4088ff!important;
}

body.dark .tos-navs .nav-item.nav-link {
	background: #162851;
	color: #3d80ff;
}

body.dark .tos-navs .nav-item.nav-link.active {
	background: #11336c;
	color: #fff;
}

body.dark #sssTab .faq-ss-tabs .home-ss-tab {
	border-color: #0f1017
}

.home-head {
	position: relative;
	padding: 50px 0 50px;
}

.home-head.outside {
	height: 50px
}


.home-head .home-head-bg {
	background-image: 
		url(https://smm360.com/img/files/1044e42675b92c8be96657d2cdd280b5.png),
		linear-gradient(to right, #ffffff, #f5f7fa);

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

	position: absolute;
	bottom: 0%;
	left: 0;
	right: -10%;
	top: -30%;

	border-radius: 0;

	transform: rotate(-7.5deg);
	transform-origin: bottom left;

	overflow: hidden;
	background-repeat: no-repeat;
}

.home-head .home-head-content {
	padding: 80px 0 50px;
	color: #000000;
}

.home-head .hh-left-badge {
	background: rgb(22, 40, 81, 0.7);
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 40px;
	border-radius: 25px;
	padding-right: 10px;
}

.home-head .hh-left-badge .hhlb-icon {
	background: #4088ff;
	color: #fff;
	margin: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 30px;
	width: 30px;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-radius: 50%;
}

.home-head .hh-left-badge .hhlb-text {
	padding: 10px 14px;
	color: #fff;
	font-weight: 600;
	line-height: 20px;
	font-size: 13px;
}

.home-head .hl-title {
	font-size: 50px;
	line-height: 64px;
	font-weight: 600;
	margin-top: 28px;
	margin-bottom: 30px;
	color: #000000;
}

.home-head .hl-text {
	color: #fff;
	font-size: 18px;
	line-height: 30px;
	font-weight: 400;
}

.hl-btns {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-top: 20px;
	margin-left: -8px;
	margin-right: -8px;
}

.hl-btns>a {
	margin: 8px;
}

.loginSide .round {
	width: 600px;
	height: 600px;
	border-radius: 50%;
	background: #a9b4fc;
	opacity: 0.07;
	position: absolute;
	top: -50px;
	left: -150px;
	z-index: 1;
}

.loginSide {
	position: relative;
}

.loginSide .login-box {
	background: #ffffff;
	-webkit-box-shadow: 0px 0px 60px rgba(94, 92, 154, 0.12);
	box-shadow: 0px 0px 60px rgba(94, 92, 154, 0.12);
	border-radius: 50px;
	padding: 34px 44px;
	position: relative;
	z-index: 20 !important;
	color: #3E3F5E;
}

.loginSide .login-box .lgb-title {
	font-size: 26px;
	font-weight: 700;
	color: #302F45;
	margin-bottom: 24px;
}

.loginSide .login-box .lgb-text {
	color: #AFB0C0;
	font-size: 15px;
	font-weight: 400;
	line-height: 25px;
	margin-bottom: 38px;
}

.loginSide .login-box .fc-home {
	border-radius: 10px;
	border: 1px solid #DEDEEA;
	position: relative;
	width: 100%;
	margin-bottom: 34px;
	padding: 0px 0px;
	-webkit-transition: .4s ease;
	transition: .4s ease;
	height: 52px;
}

.loginSide .login-box .fc-home label {
	font-size: 12px;
	color: #AFB0C0;
	line-height: 20px;
	height: 20px;
	padding: 0 10px;
	position: absolute;
	top: -11px;
	left: 15px;
	z-index: 3;
}

.loginSide .login-box .fc-home label .label-text {
	z-index: 3;
	position: relative;
}

.loginSide .login-box .fc-home label::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 9px;
	width: 100%;
	background: #fff;
	height: 2px;
}

.loginSide .login-box .fc-home input {
	font-size: 15px;
	height: 100%;
	width: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: none;
	outline: none !important;
	color: #3E3F5E;
	padding: 0 25px;
	background: transparent !important;
	border-radius: 9px;
}

.loginSide .login-box .fc-home:focus-within {
	border-color: #3E3F5E;
}

.frgpass {
	text-decoration: none;
	color: #302F45;
	font-size: 14px
}

.frgpass:hover {
	color: #3E3F5E;
}

.home-menu-btn {
	display: none;
	margin-top: -40px;
	z-index: 1030;
	position: fixed;
	right: 30px;
}

.form-check-label {
	font-size: 14px;
	color: #302F45;
}

@media screen and (max-width: 991.98px) {
	.home-head.outside {
		height: 100px
	}
	.home-head.outside .home-head-bg {
		border-radius: 0 0 75px 75px
	}
	.home-info {
		padding: 0!important
	}
	.loginSide .login-box .lgb-title,
	.loginSide .login-box .lgb-text {
		text-align: center
	}
	.app-navbar {
		display: block!important
	}
	.home-menu-btn {
		display: inline-block;
	}
	.header {
		margin-top: 0;
	}
	.header .site-name {
		margin-left: 0
	}
	.header .site-name img {
		height: 50px;
		text-align: center
	}
	.home-head .home-head-content {
		padding: 5px 0 50px;
	}
	.loginSide .login-box {
		padding: 50px 15px
	}
	.home-body .app-navbar .navbar-mid-icon {
		margin-left: 0
	}
	.m-flex {
		display: flex;
		justify-content: center;
	}
	

	.home-head .home-head-bg {
	background-image: 
		url(https://smm360.com/img/files/1044e42675b92c8be96657d2cdd280b5.png),
		linear-gradient(to right, #ffffff, #f5f7fa);

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

	position: absolute;
	bottom: 0%;
	left: 0;
	right: -10%;
	top: -30%;

	border-radius: 0;

	transform: rotate(-7.5deg);
	transform-origin: bottom left;

	overflow: hidden;
	background-repeat: no-repeat;
}

	.loginSide .round {
		display: none
	}
	.shapeBox {
		display: none!important
	}
	.hs-area {
		margin-top: 40px;
		padding-bottom: 0!important
	}
	.hs-head h1,
	.ha-title h2 {
		font-size: 24px!important;
		line-height: 32px!important
	}
	.ha-item .ha-heading {
		order: -1;
		text-align: center !important;
		margin-bottom: 40px;
	}
	.ha-item .ha-graph::after {
		background-size: 200%;
		width: 100%;
	}
	.ha-item .graphics {
		text-align: center;
		margin-left: auto !important;
		margin-right: auto !important;
	}
	.ha-item .graphics img {
		max-width: 300px
	}
	.ha-item .graphics img.main-image {
		margin: auto !important;
	}
	.ha-item .graphics span.shadow {
		width: auto !important;
		left: -10% !important;
		right: -10% !important;
	}
	.ha-item .graphics span.shadow:nth-child(2) {
		left: -20% !important;
		right: -20% !important;
	}
	.ha-title .ha-title-icon {
		margin: auto
	}
	.footer {
		margin-top: 0!important
	}
	.footer .footer-top {
		display: none
	}
	.footer .footer-content-bot .footer-content-bot-text {
		text-align: center!important;
		padding-bottom: 75px
	}
	.footer-content-bot-text {
		padding-top: 0px
	}
}

.shapeBox {
	max-width: 1200px;
	margin: auto;
	display: block;
	position: relative;
}

.shape {
	position: absolute;
}

.shape1 {
	left: 50px;
	top: 800px;
	animation: fade-up 2s infinite ease-in-out;
}

.shape2 {
	left: 250px;
	top: 700px;
	animation: fade-up 2.5s infinite ease-in-out;
}

.shape3 {
	left: 450px;
	top: 750px;
	animation: fade-up 3.5s infinite ease-in-out;
}

.ha-item:not(:last-child) {
	margin-bottom: 130px;
}

.ha-item .ha-heading {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	-moz-align-items: center;
	align-items: center;
	margin-right: auto;
}

.ha-item .ha-heading .section-heading {
	margin: 0;
}

.ha-item .ha-graph {
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	position: relative;
}

.ha-item .ha-graph::after {
	content: "";
	background: #8224e3;
	background-image: linear-gradient(to right, #FFAB5A 0%, #f35c3c 50%, #FFAB5A 100%);
	height: 100%;
	width: 100vw;
	border-radius: 500px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -999;
}

.ha-item .graphics {
	position: relative;
	display: inline-block;
	margin-left: 75px;
}

.ha-item .graphics img.main-image {
	height: 480px;
	border-radius: 25px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

.ha-item .graphics span.shadow {
	content: "";
	background: rgba(255, 255, 255, 0.15);
	display: block;
	height: 90%;
	width: 90%;
	border-radius: 25px;
	position: absolute;
	left: 10%;
	bottom: 0;
	z-index: -1;
	box-shadow: none !important;
}

.ha-item .graphics span.shadow:nth-child(2) {
	height: 80%;
	width: 80%;
	left: 30%;
}

.ha-item.inverse .ha-heading {
	margin-right: initial;
	margin-left: auto;
	text-align: left;
}

.ha-item.inverse .ha-graph::after {
	left: initial;
	right: 0;
}

.ha-item.inverse .graphics {
	margin-left: auto;
	margin-right: -15px;
}

.ha-item.inverse span.shadow {
	left: initial;
	right: 20%;
}

.ha-item.inverse span.shadow:nth-child(2) {
	left: initial;
	right: 40%;
}

@media screen and (max-width: 767.98px) {
	.ha-item .ha-graph::after {
		width: auto;
		height: auto;
		left: 15px !important;
		right: 15px !important;
		padding-top: calc(100% - 30px);
	}
	.ha-item .graphics span.shadow {
		display: none
	}
    .form-group .form-control, #serviceItem, #categoryItem {
    	font-size: 12px
    }
}

.ha-title .ha-title-icon {
	height: 86px;
	width: 86px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background: linear-gradient(to right, #185BDC, #315DFF);
	border-radius: 25px;
	font-size: 56px;
	color: #fff;
}

.ha-title h2 {
	margin: 0;
	font-size: 32px;
	line-height: 45px;
	color: #302F45;
	padding: 0px;
	font-weight: 700;
}

.ha-text {
	font-size: 16px;
	line-height: 31px;
	margin-top: 35px;
}

.hs-area {
	padding: 0 0 70px 0;
}

.hs-area .hs-area-owl {
	padding: 40px 0;
}

.hs-area .hs-area-owl .owl-stage-outer {
	position: relative;
	z-index: 1;
}

.hs-area .hsa-item {
	padding: 24px 30px;
	background-color: #fff;
	-webkit-box-shadow: 0px 10px 30px 0px rgba(234, 61, 86, 0.06);
	box-shadow: 0px 10px 30px 0px rgba(234, 61, 86, 0.06);
	border-radius: 20px;
	color: #a1a1a1;
	-webkit-transition: .14s ease;
	transition: .14s ease;
	cursor: pointer
}

.hs-area .hsa-item:hover {
	-webkit-box-shadow: 0px 10px 30px 0px rgba(234, 61, 86, 0.10);
	box-shadow: 0px 10px 30px 0px rgba(234, 61, 86, 0.10);
	color: #302F45
}

.hs-area .hsa-item:hover .hsi-more {
	color: #000;
	text-decoration: none
}

.hs-area .hsa-item .hsi-icon i {
	font-size: 67px;
}

.hs-area .hsa-item .hsi-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .4px;
}

.hs-area .hsa-item .hsi-more {
	color: #a1a1a1;
	font-size: 13px;
	font-weight: 300px;
}

.hs-head {
	text-align: center
}

.hs-head h1 {
	font-size: 32px;
	line-height: 45px;
	color: #302F45;
	padding: 0px;
	font-weight: 700;
}

.hs-head small {
	font-size: 16px;
	line-height: 31px;
}

.footer {
	position: relative;
	background-color: #fcfcfc;
	margin-top: 100px;
	border-top: 1px solid rgba(0,0,0,0.2);
	overflow: hidden; 
}

.footer .footer-content {
	padding: 20px 0;
}

.footer .footer-top {
	color: #fff;
	background: -webkit-gradient(linear, left top, right top, from(#185BDC), to(#0a47be)) #185BDC;
	background: linear-gradient(to right, #185BDC, #0a47be) #185BDC;
	padding: 50px 0;
}

.footer .footer-top .ftgu-text {
	color: #fff;
	font-weight: 400;
	line-height: 100%;
	font-size: 30px;
}

.footer .footer-links {
	font-size: 16px;
}

.footer .footer-links ul {
	list-style: none;
	margin: 0px;
	top: 0px;
	padding: 0px;
}

.footer .footer-links ul li {
	display: inline-block;
	padding: 0 15px;
}

.footer .footer-links ul li a {
	font-size: 12px;
	font-weight: 200;
	display: block;
	color: black;
	text-decoration: none;
	-webkit-transition: .15s ease;
	transition: .15s ease;
	letter-spacing: .4px;
}

.footer .footer-links ul li a:hover {
	color: rgba(0, 0, 0, 0.8);
}

.footer .footer-content-bot .footer-content-bot-text {
	font-size: 14px;
	font-weight: 300;
	color: rgba(0, 0, 0, 0.8);
	text-align: right;
		width: 100%;
	display: flex;
	justify-content: flex-end;
}

.footer .footer-content-bot .footer-content-bot-text a {
	color: #000000;
}

.register-page {
	background-color: #fcfcfc;
	color: #fff;
	min-height: 100vh;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.register-page .register-page-content {
	position: relative;
	padding: 100px 0;
	width: 100%;
}

.register-left {
	text-align: center;
}

.register-left .rl-logo {
	height: 75px;
}

.register-left .rl-text {
	font-size: 16px;
	letter-spacing: -.4px;
	line-height: 175%;
	margin-top: 40px;
	color: #43495d;
}

.register-left .rl-menu {
	list-style: none;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding: 0px;
	margin: 0px;
	margin-top: 30px;
}

.register-left .rl-menu li {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	padding: 10px 15px;
}

.register-left .rl-menu li a {
	display: block;
	text-decoration: none;
	font-weight: 400;
	color: #7f89b7;
}

.home-info {
	padding: 50px 0;
}

.home-info .hi-title {
	font-size: 32px;
	line-height: 45px;
	color: #302F45;
	padding: 0px;
	font-weight: 700;
}

.home-sab-items .hosa-item {
	margin-bottom: 15px;
	background-color: transparent;
	border-radius: 10px;
	background-color: #fff;
	-webkit-box-shadow: 0px 10px 30px 0px rgb(234 61 86 / 6%);
	box-shadow: 0px 10px 30px 0px rgb(234 61 86 / 6%);
	padding: 25px 10px;
}

.home-sab-items .hosa-item:hover {
	background: #174de3;
	-webkit-transition: .1s ease;
	transition: .1s ease;
	cursor: pointer;
}

.home-sab-items .hosa-item:hover .hosa-icon>img {
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}

.home-sab-items .hosa-item .hosa-title {
	color: #302F45;
	font-weight: 600;
	font-size: 18px;
	text-align: center
}

.home-sab-items .hosa-item:hover .hosa-title {
	color: #fff
}

.pagination {
  margin: 0;
  padding: 0;
  text-align: center
}
.pagination li {
  display: inline
}
.pagination li a {
  display: inline-block;
  text-decoration: none;
  padding: 5px 10px;
  color: #fff;
  background: #185BDC;
  margin-right: 5px;
  border-radius: 5px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s
}
.pagination li a.active {
  background-color: #FFAB5A;
  color: #fff
}
.pagination li a:hover:not(.active) {
  background-color: #FFAB5A;
} 

.btn.btn-default.btn-xs {
	background: #FFAB5A;
    color: #fff;
  	padding: 7px
}

body.dark .dfb-search .dfb-input {
	color: #fff
}

.blog-txt {
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#categoryTitle,
#serviceTitle {
  width: 90%;
  overflow: hidden;
  position: absolute;
  height: 20px
}

.modal-content {
    border-radius: 16px;
}

.table th {
    vertical-align: middle;
    font-weight: 600;
}

.table td {
    vertical-align: middle;
}

.modal-header {
    border-radius: 16px 16px 0 0;
}

.alert {
    border-radius: 12px;
}

/* ==========================================================================
   ส่วนที่เพิ่มเข้าไปเพื่อแก้ปัญหาการจัดกลางและระยะบีบในมือถือ
   ========================================================================== */
@media (max-width: 767.98px) {

	/* บังคับให้การจัดอักษรภายใน d-card ชิดซ้ายทั้งหมดบนมือถือ */
	.d-card,
	.d-card .d-card-body,
	.d-card form,
	.d-card .form-group {
		text-align: left !important;
	}

	/* ลด Padding ด้านข้างลงบนมือถือ เพื่อไม่ให้บีบเนื้อหาจนเพี้ยน */
	.d-card .d-card-body {
		padding: 15px 15px 15px 15px !important;
	}

	/* ปรับระยะหัวข้อ d-card-head ให้พอดีกับหน้าจอมือถือ */
	.d-card .d-card-head {
		margin: 0 15px !important;
		padding: 15px 0px !important;
		font-size: 17px !important;
		/* ปรับขนาดตัวอักษรลงเล็กน้อยให้พอดีจอ */
	}

	/* ปรับเส้นใต้หัวข้อให้สอดคล้องกับขนาดจอ */
	.d-card .d-card-head::after {
		width: 100px !important;
	}

	/* ปรับปุ่มเลือกหมวดหมู่/บริการของ Bootstrap ให้ชิดซ้ายเด็ดขาด */
	.d-card .dropdown-toggle,
	.d-card .dropdown-menu,
	.d-card .form-control {
		text-align: left !important;
	}
}

.guide-card,
.guide-card * {
    text-align: left !important;
}

.guide-card .d-flex {
    align-items: flex-start !important;
}

.guide-card ul li,
.guide-card ol li,
.guide-card p,
.guide-card span,
.guide-card div,
.guide-card h5,
.guide-card h6 {
    justify-content: flex-start !important;
}
:root {
        --brand-primary: #4361ee;
        --brand-hover: #3a53d0;
        --bg-surface: #ffffff;
        --bg-app: #f4f7fe;
        --text-dark: #2b3674;
        --text-muted: #a3aed1;
        --border-light: #e2e8f0;
        --radius-lg: 20px;
        --radius-md: 12px;
        --shadow-soft: 0 10px 40px -10px rgba(70, 96, 138, 0.15);
        --transition: all 0.3s ease;
    }

    .ticket-system-wrapper {
        background-color: var(--bg-app);
        padding: 2rem 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    /* Modern Card */
    .modern-card {
        background: var(--bg-surface);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-soft);
        border: none;
        padding: 2rem;
        height: 100%;
    }

    .card-title {
        color: var(--text-dark);
        font-weight: 700;
        font-size: 1.25rem;
        margin-bottom: 1.5rem;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Form Controls */
    .modern-label {
        color: var(--text-dark);
        font-weight: 600;
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
        display: block;
    }

    .modern-input, .modern-select, .modern-textarea {
        width: 100%;
        background-color: #f8fafc;
        border: 1px solid var(--border-light);
        color: var(--text-dark);
        border-radius: var(--radius-md);
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        transition: var(--transition);
        margin-bottom: 1.5rem;
    }

    .modern-input:focus, .modern-select:focus, .modern-textarea:focus {
        outline: none;
        border-color: var(--brand-primary);
        background-color: #fff;
        box-shadow: 0 0 0 4px rgba(67, 97, 238, 0.1);
    }

    /* Button */
    .btn-modern {
        background: var(--brand-primary);
        color: white;
        border: none;
        border-radius: var(--radius-md);
        padding: 1rem;
        font-weight: 600;
        font-size: 1rem;
        width: 100%;
        cursor: pointer;
        transition: var(--transition);
        box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
    }

    .btn-modern:hover {
        background: var(--brand-hover);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(67, 97, 238, 0.4);
    }

    /* Custom Tabs */
    .modern-tabs {
        display: flex;
        background: #f8fafc;
        border-radius: var(--radius-md);
        padding: 5px;
        margin-bottom: 1.5rem;
        gap: 5px;
    }

    .modern-tabs .nav-link {
        flex: 1;
        text-align: center;
        padding: 0.75rem;
        border-radius: 8px;
        color: var(--text-muted);
        font-weight: 600;
        cursor: pointer;
        border: none;
        background: transparent;
        transition: var(--transition);
    }

    .modern-tabs .nav-link.active {
        background: var(--bg-surface);
        color: var(--brand-primary);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    /* Table Styles */
    .modern-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 8px;
    }

    .modern-table th {
        color: var(--text-muted);
        font-weight: 600;
        font-size: 0.85rem;
        text-transform: uppercase;
        padding: 0 1rem 0.5rem 1rem;
        border-bottom: 2px solid var(--border-light);
    }

    .modern-table td {
        background: #f8fafc;
        padding: 1rem;
        color: var(--text-dark);
        font-size: 0.95rem;
    }

    .modern-table tr td:first-child { border-radius: 12px 0 0 12px; }
    .modern-table tr td:last-child { border-radius: 0 12px 12px 0; }

    /* Badges */
    .status-badge {
        padding: 6px 12px;
        border-radius: 30px;
        font-size: 0.8rem;
        font-weight: 700;
    }
    .badge-answered { background: #d1fae5; color: #059669; }
    .badge-pending { background: #fef3c7; color: #d97706; }
    .badge-closed { background: #fee2e2; color: #dc2626; }

    /* FAQ Details/Summary */
    .modern-faq { margin-bottom: 1rem; }
    .modern-faq details {
        background: #f8fafc;
        border-radius: var(--radius-md);
        padding: 1rem;
        transition: var(--transition);
    }
    .modern-faq details[open] { background: var(--bg-surface); box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    .modern-faq summary {
        font-weight: 600;
        color: var(--text-dark);
        cursor: pointer;
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .modern-faq summary::-webkit-details-marker { display: none; }
    .modern-faq summary::after {
        content: '+';
        font-size: 1.2rem;
        color: var(--brand-primary);
        transition: var(--transition);
    }
    .modern-faq details[open] summary::after { content: '-'; }
    .modern-faq p {
        margin-top: 1rem;
        color: var(--text-muted);
        font-size: 0.95rem;
        line-height: 1.6;
    }
/* ── Lucky Box — Design Tokens ─────────────────────────────── */
:root {
  --lb-bg:          #f0f2f8;
  --lb-surface:     #ffffff;
  --lb-surface2:    #f1f5f9;
  --lb-border:      #e2e8f0;
  --lb-gold:        #d97706;
  --lb-gold-light:  #fef3c7;
  --lb-violet:      #6366f1;
  --lb-violet-glow: rgba(99, 102, 241, 0.15);
  --lb-green:       #10b981;
  --lb-red:         #ef4444;
  --lb-text:        #1e293b;
  --lb-muted:       #64748b;
  --lb-radius:      16px;
  --lb-radius-sm:   10px;
  --lb-shadow:      0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
  --lb-shadow-md:   0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -2px rgba(0,0,0,0.04);
}

/* ── Root layout — two-column, fills viewport height ───────── */
.lb-root {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-height: calc(100vh - 100px);
  padding: 24px;
  background: var(--lb-bg);
  box-sizing: border-box;
  align-items: start;
}

/* ── Left column ────────────────────────────────────────────── */
.lb-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: sticky;
  top: 116px;
}

/* ── Right column ───────────────────────────────────────────── */
.lb-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lb-panel {
  background: var(--lb-surface);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius);
  padding: 20px;
  box-shadow: var(--lb-shadow);
}

/* ── Header ─────────────────────────────────────────────────── */
.lb-header {
  text-align: center;
  margin-bottom: 20px;
}
.lb-header h1 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--lb-text);
  margin: 0 0 4px;
}
.lb-header p {
  color: var(--lb-muted);
  font-size: .85rem;
  margin: 0;
}

/* ── Stats ──────────────────────────────────────────────────── */
.lb-stats {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}
.stat-card {
  background: var(--lb-surface);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  padding: 14px 18px;
  text-align: center;
  flex: 1;
  min-width: 120px;
  box-shadow: var(--lb-shadow);
}
.stat-card .label {
  font-size: .7rem;
  color: var(--lb-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.stat-card .value {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.stat-card.ticket .value  { color: var(--lb-violet); }
.stat-card.balance .value { color: var(--lb-green); }
.stat-card.items .value   { color: var(--lb-gold); }

/* ── Box Stage ──────────────────────────────────────────────── */
.lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.box-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 20px auto 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.premium-box {
  position: relative;
  width: 130px;
  height: 130px;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.box-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle, rgba(234,179,8,.35) 0%, rgba(234,179,8,0) 70%);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  transition: all 0.4s ease;
}

.box-lid {
  position: absolute;
  top: 14px;
  left: 0;
  width: 130px;
  height: 33px;
  background: linear-gradient(135deg, #ffe066 0%, #f5b016 50%, #c68a0c 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow: 0 8px 16px rgba(15,23,42,.2), inset 0 2px 4px rgba(255,255,255,.6), inset 0 -2px 4px rgba(0,0,0,.15);
  z-index: 10;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.box-body {
  position: absolute;
  bottom: 10px;
  left: 5px;
  width: 120px;
  height: 83px;
  background: linear-gradient(135deg, #f5b016 0%, #c68a0c 50%, #916300 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 15px 35px rgba(198,138,12,.3), inset 0 1px 3px rgba(255,255,255,.4), inset 0 -4px 10px rgba(0,0,0,.2);
  z-index: 5;
}

.box-ribbon-v {
  position: absolute;
  top: 14px;
  left: 50px;
  width: 28px;
  height: 106px;
  background: linear-gradient(180deg, #ff3344 0%, #dc143c 50%, #990011 100%);
  border-radius: 2px;
  z-index: 11;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.15);
}

.box-ribbon-h {
  position: absolute;
  top: 24px;
  left: 0;
  width: 130px;
  height: 13px;
  background: linear-gradient(90deg, #ff3344 0%, #dc143c 50%, #990011 100%);
  z-index: 12;
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

.box-wrap:hover .premium-box {
  transform: translateY(-8px) scale(1.04) rotate(2deg);
}
.box-wrap:hover .box-glow {
  inset: -35px;
  background: radial-gradient(circle, rgba(255,51,68,.35) 0%, rgba(234,179,8,0) 70%);
}
.box-wrap:hover .box-lid {
  transform: translateY(-5px) rotate(-1deg);
}

.box-wrap.shaking .premium-box {
  animation: lbBoxShake 0.5s ease-in-out infinite;
}
.box-wrap.shaking .box-glow {
  background: radial-gradient(circle, rgba(255,255,255,.6) 0%, rgba(234,179,8,0) 70%);
}

@keyframes lbBoxShake {
  0%,100% { transform: rotate(0deg) scale(1); }
  20%     { transform: rotate(-8deg) scale(1.05); }
  40%     { transform: rotate(6deg) scale(.95); }
  60%     { transform: rotate(-6deg) scale(1.05); }
  80%     { transform: rotate(4deg) scale(.98); }
}

.box-wrap.opening .box-lid {
  transform: translateY(-45px) rotate(-15deg) scale(.9);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.box-wrap.opening .premium-box {
  transform: scale(1.1);
}

/* ── Open Button ────────────────────────────────────────────── */
.btn-open {
  background: linear-gradient(135deg, var(--lb-violet), #818cf8);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 13px 44px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 15px -3px rgba(99,102,241,.3);
  transition: opacity .2s, transform .1s, box-shadow .2s;
  letter-spacing: .03em;
  font-family: inherit;
}
.btn-open:hover:not(:disabled) {
  opacity: .95;
  transform: translateY(-1px);
  box-shadow: 0 12px 20px -3px rgba(99,102,241,.4);
}
.btn-open:active:not(:disabled) { transform: translateY(0); }
.btn-open:disabled {
  background: var(--lb-surface2);
  color: var(--lb-muted);
  cursor: not-allowed;
  box-shadow: none;
}

.ticket-note {
  font-size: .78rem;
  color: var(--lb-muted);
  margin-top: -8px;
}

/* ── Section title ──────────────────────────────────────────── */
.lb-section-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lb-muted);
  margin-bottom: 12px;
}

/* ── History list ───────────────────────────────────────────── */
.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 2px;
}
.history-list::-webkit-scrollbar { width: 4px; }
.history-list::-webkit-scrollbar-thumb { background: var(--lb-border); border-radius: 4px; }

.history-item {
  background: var(--lb-surface2);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  transition: transform 0.15s;
}
.history-item:hover { transform: translateY(-1px); }
.history-icon { font-size: 1.3rem; flex-shrink: 0; }
.history-name { flex: 1; font-weight: 600; color: var(--lb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-type {
  font-size: .7rem;
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 700;
  flex-shrink: 0;
}
.type-BALANCE { background: #ecfdf5; color: var(--lb-green); }
.type-ITEM    { background: #eef2ff; color: var(--lb-violet); }
.history-date { font-size: .7rem; color: var(--lb-muted); white-space: nowrap; flex-shrink: 0; }

.empty-note {
  color: var(--lb-muted);
  font-size: .85rem;
  text-align: center;
  padding: 20px 0;
}

/* ── Inventory grid ─────────────────────────────────────────── */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 2px;
}
.inventory-grid::-webkit-scrollbar { width: 4px; }
.inventory-grid::-webkit-scrollbar-thumb { background: var(--lb-border); border-radius: 4px; }

.inv-card {
  background: var(--lb-surface2);
  border: 1px solid var(--lb-border);
  border-radius: var(--lb-radius-sm);
  padding: 14px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.inv-card .inv-name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--lb-text);
}
.inv-card .inv-qty {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--lb-violet);
  line-height: 1;
}
.inv-card .inv-lbl {
  font-size: .7rem;
  font-weight: 500;
  color: var(--lb-muted);
}
.btn-exchange {
  margin-top: 6px;
  padding: 7px 10px;
  background: var(--lb-green);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: .75rem;
  width: 100%;
  font-weight: 700;
  transition: opacity 0.2s;
  box-shadow: 0 2px 4px rgba(16,185,129,.2);
  font-family: inherit;
}
.btn-exchange:hover { opacity: .9; }

/* ── Reward Modal ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.modal-backdrop.active { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--lb-surface);
  border: 1px solid var(--lb-border);
  border-radius: 24px;
  padding: 36px 32px 28px;
  text-align: center;
  max-width: 340px;
  width: 90%;
  transform: scale(.9);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.12), 0 10px 10px -5px rgba(0,0,0,.05);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.modal-backdrop.active .modal-box { transform: scale(1); }

.modal-emoji { font-size: 3.2rem; margin-bottom: 10px; }
.modal-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 6px; color: var(--lb-text); }
.modal-sub   { font-size: .9rem; color: var(--lb-muted); margin-bottom: 16px; }
.modal-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--lb-green);
  margin-bottom: 4px;
}
.modal-rarity {
  display: inline-block;
  font-size: .72rem;
  padding: 4px 14px;
  border-radius: 50px;
  font-weight: 700;
  margin-bottom: 16px;
}
.rarity-COMMON    { background: #f1f5f9; color: #475569; }
.rarity-RARE      { background: #ecfdf5; color: var(--lb-green); }
.rarity-EPIC      { background: #eef2ff; color: var(--lb-violet); }
.rarity-LEGENDARY { background: #fffbeb; color: var(--lb-gold); }

.btn-close-modal {
  background: var(--lb-surface2);
  border: 1px solid var(--lb-border);
  color: var(--lb-text);
  border-radius: 50px;
  padding: 10px 40px;
  font-size: .9rem;
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
  transition: background .15s, color .15s;
}
.btn-close-modal:hover { background: var(--lb-border); }

/* ── Confirm Modal ──────────────────────────────────────────── */
.confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.confirm-backdrop.active { opacity: 1; pointer-events: all; }
.confirm-box {
  background: var(--lb-surface);
  border: 1px solid var(--lb-border);
  border-radius: 20px;
  padding: 32px 24px 24px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  transform: scale(.95);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 20px 25px -5px rgba(0,0,0,.1);
}
.confirm-backdrop.active .confirm-box { transform: scale(1); }
.confirm-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lb-text);
  line-height: 1.6;
  margin-bottom: 22px;
}
.confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.btn-confirm-yes {
  background: var(--lb-violet);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px 28px;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
  font-family: inherit;
}
.btn-confirm-yes:hover { opacity: .9; }
.btn-confirm-no {
  background: var(--lb-surface2);
  border: 1px solid var(--lb-border);
  color: var(--lb-muted);
  border-radius: 50px;
  padding: 10px 28px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
.btn-confirm-no:hover { background: var(--lb-border); }

/* ── Confetti ───────────────────────────────────────────────── */
@keyframes confettiFall {
  0%   { opacity:1; transform: translateY(-30px) rotate(0deg); }
  100% { opacity:0; transform: translateY(120px) rotate(720deg); }
}
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall 1.2s ease forwards;
  pointer-events: none;
  z-index: 1400;
}

/* ── Tablet: stack columns at 900px ────────────────────────── */
@media (max-width: 900px) {
  .lb-root {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
    min-height: unset;
  }
  .lb-left {
    position: static;
  }
  .lb-header h1 { font-size: 1.6rem; }
  .lb-stats { gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-card .value { font-size: 1.4rem; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .lb-root {
    padding: 12px 12px 80px;
  }

  .lb-header h1 { font-size: 1.4rem; }
  .lb-header p  { font-size: .8rem; }

  .lb-stats {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lb-stats::-webkit-scrollbar { display: none; }
  .stat-card {
    flex: 0 0 auto;
    min-width: 110px;
    padding: 10px 12px;
  }
  .stat-card .label { font-size: .65rem; }
  .stat-card .value { font-size: 1.2rem; }

  .box-wrap { width: 150px; height: 150px; margin: 10px auto 0; }
  .premium-box { width: 108px; height: 108px; }
  .box-lid { width: 108px; height: 28px; top: 12px; }
  .box-body { width: 98px; height: 68px; left: 5px; }
  .box-ribbon-v { left: 40px; width: 24px; height: 88px; top: 12px; }
  .box-ribbon-h { width: 108px; height: 12px; top: 20px; }

  .btn-open { padding: 11px 36px; font-size: .95rem; }

  .lb-panel { padding: 16px; }

  .history-list { max-height: 240px; }
  .history-name { font-size: .82rem; }
  .history-date { display: none; }

  .inventory-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    max-height: 200px;
  }

  .modal-box { padding: 28px 20px 22px; }
  .modal-emoji { font-size: 2.6rem; }
  .modal-title { font-size: 1.1rem; }
  .modal-value { font-size: 1.7rem; }

  .confirm-box { padding: 24px 18px 18px; }
  .confirm-title { font-size: .95rem; }
  .btn-confirm-yes, .btn-confirm-no { padding: 9px 20px; font-size: .85rem; }
}

/* ปุ่มสั่งซื้อ */
.btn-order{
    width:100%;
    height:56px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    border:none;
    border-radius:14px;

    background:linear-gradient(
        135deg,
        #22c55e 0%,
        #16a34a 50%,
        #15803d 100%
    );

    color:#fff;
    font-size:1rem;
    font-weight:700;

    position:relative;
    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;

    box-shadow:
        0 10px 24px rgba(34,197,94,.28),
        inset 0 1px 0 rgba(255,255,255,.25);

    cursor:pointer;
}

/* เอฟเฟคแสงวิ่ง */
.btn-order::before{
    content:"";

    position:absolute;
    top:0;
    left:-120%;

    width:60%;
    height:100%;

    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-20deg);
    transition:.8s;
}

.btn-order:hover::before{
    left:140%;
}

/* Hover */
.btn-order:hover{
    transform:
        translateY(-2px)
        scale(1.01);

    box-shadow:
        0 18px 35px rgba(34,197,94,.38);

    filter:brightness(1.05);
}

/* กด */
.btn-order:active{
    transform:
        scale(.98);

    box-shadow:
        0 6px 14px rgba(34,197,94,.2);
}

/* ไอคอน */
.btn-order i{
    font-size:1.05rem;

    transition:
        transform .3s ease;
}

.btn-order:hover i{
    transform:
        translateX(-2px)
        rotate(-8deg);
}

/* focus */
.btn-order:focus{
    outline:none;

    box-shadow:
        0 0 0 4px rgba(34,197,94,.18),
        0 16px 32px rgba(34,197,94,.3);
}

.lucky-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    font-size:2rem;
    font-weight:800;

    color:#1f2a44;
}

.icon-box{
    width:42px;
    height:42px;

    position:relative;

    background:
        linear-gradient(
            145deg,
            #ffbf36,
            #ff8c00
        );

    border-radius:10px;

    flex-shrink:0;

    box-shadow:
        0 10px 25px rgba(255,145,0,.25),
        inset 0 2px 4px rgba(255,255,255,.35);
}

.icon-box::before{
    content:'';

    position:absolute;

    left:50%;

    width:10px;
    height:100%;

    transform:translateX(-50%);

    background:
        linear-gradient(
            #ff0059,
            #c80045
        );
}

.icon-box::after{
    content:'';

    position:absolute;

    top:8px;
    left:0;

    width:100%;
    height:10px;

    background:
        linear-gradient(
            #ff0059,
            #c80045
        );
}

.icon-ticket{
    width:56px;
    height:36px;

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            135deg,
            #ffbe0b,
            #ff7b00
        );

    border:2px dashed #cc6800;

    border-radius:10px;

    box-shadow:
        0 8px 18px rgba(255,150,0,.25);

    font-size:18px;
    line-height:1;

    overflow:visible;

    z-index:1;
}

.icon-ticket::before,
.icon-ticket::after{
    content:'';

    position:absolute;

    width:12px;
    height:12px;

    background:#fff;

    border-radius:50%;

    top:50%;

    transform:translateY(-50%);

    z-index:0;
}

.icon-ticket::before{
    left:-7px;
}

.icon-ticket::after{
    right:-7px;
}

.icon-ticket > *{
    position:relative;
    z-index:2;
}

/* --- คอนเทนเนอร์หลักและสไตล์พื้นฐาน --- */
.app-content-modern {
    padding: 2rem 0;
    font-family: 'Inter', 'Kanit', sans-serif;
    background-color: #f8fafc;
}

/* --- แถบค้นหาและตัวกรองแบบ Flexbox --- */
.controls-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: #ffffff;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    margin-bottom: 1.5rem;
}

.dropdown-container {
    flex: 0 0 200px;
}

.search-container {
    flex: 1;
    position: relative;
}

/* --- ปุ่มและอินพุตสไตล์โมเดิร์น --- */
.btn-modern {
    border-radius: 8px;
    padding: 0.65rem 1.2rem;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-dropdown {
    background-color: #4f46e5;
    color: #ffffff;
    width: 100%;
    justify-content: space-between;
}

.btn-dropdown:hover, .btn-dropdown:focus {
    background-color: #4338ca;
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
}

.search-input-modern {
    width: 100%;
    padding: 0.65rem 1rem 0.65rem 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background-color: #f8fafc;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.search-input-modern:focus {
    background-color: #ffffff;
    border-color: #4f46e5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* --- เมนูดรอปดาวน์ --- */
.modern-dropdown {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    padding: 0.5rem;
    margin-top: 0.5rem !important;
}

.modern-dropdown li a {
    padding: 0.6rem 1rem;
    border-radius: 6px;
    color: #334155;
    transition: background 0.15s;
    display: block;
    text-decoration: none;
}

.modern-dropdown li a:hover {
    background-color: #f1f5f9;
    color: #4f46e5;
}

/* --- ตารางรูปแบบใหม่ (Table Modern) --- */
.services-container-modern {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.table-modern {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.table-modern th {
    background-color: #f1f5f9;
    color: #475569;
    font-weight: 600;
    /* ลด Padding ของหัวตาราง ลงมาเหลือ บน-ล่าง 0.5rem ซ้าย-ขวา 0.75rem */
    padding: 0.5rem 0.75rem; 
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
}

.table-modern td {
    /* ลด Padding ของช่องข้อมูลลงมาให้บางและชิดกันมากขึ้น */
    padding: 0.4rem 0.75rem;  /* บน-ล่าง 0.4rem (ประมาณ 6-8px) ซ้าย-ขวา 0.75rem */
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.9rem;          /* ปรับขนาดฟอนต์ให้กะทัดรัดขึ้นเล็กน้อย */
    vertical-align: middle;
    line-height: 1.2;           /* บังคับให้ความสูงของบรรทัดชิดกัน ไม่เยื้องกว้างเกินไป */
}

/* แถวหัวข้อหมวดหมู่ (แถวที่มีไอคอนแบรนด์ เช่น Facebook) */
.services-header-row td {
    background-color: #f8fafc;
    /* ลดระยะห่างของแถวหัวข้อให้กระชับเข้าคู่กับข้อมูล */
    padding: 0.45rem 0.75rem;
}

.category-badge-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* แถวหัวข้อหมวดหมู่ */
.services-header-row td {
    background-color: #f8fafc;
    padding: 0.75rem 1rem;
}

.category-badge-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* สไตล์ข้อมูลตัวเลขและสถานะ */
.price-cell {
    font-weight: 600;
    color: #0f172a;
}

.text-success-modern {
    color: #16a34a;
    font-weight: 500;
}

.text-danger-modern {
    color: #dc2626;
    font-weight: 500;
}

/* ปุ่มกดดูรายละเอียด */
.btn-action-view {
    background-color: #f1f5f9;
    color: #475569;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action-view:hover {
    background-color: #e2e8f0;
    color: #1e293b;
}

.text-center-desktop {
    text-align: center;
}

/* ซ่อนแถวเมื่อทำการกรองข้อมูล */
tr.hidden {
    display: none !important;
}

/* --- ดีไซน์โมดอล (Modern Modal Layer) --- */
.modal-content-modern {
    background: #ffffff;
    border-radius: 16px;
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.modal-header-modern {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f8fafc;
}

.modal-title-modern {
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.close-modal-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
}

.modal-body-modern {
    padding: 1.5rem;
    color: #475569;
    line-height: 1.6;
}

.modal-footer-modern {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background: #f8fafc;
}

.btn-primary-modern { background-color: #4f46e5; color: #ffffff; }
.btn-primary-modern:hover { background-color: #4338ca; color: #ffffff; }
.btn-secondary-modern { background-color: #e2e8f0; color: #475569; }
.btn-secondary-modern:hover { background-color: #cbd5e1; }

/* --- รองรับการแสดงผลบนหน้าจอมือถือ (Responsive Card View) --- */
@media (max-width: 768px) {
    .controls-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    
    .dropdown-container {
        flex: none;
        width: 100%;
    }

    /* เปลี่ยนระบบตารางเป็นแผ่นการ์ดข้อมูล */
    .table-modern thead {
        display: none; /* ซ่อนหัวตารางบนมือถือ */
    }

    .table-modern, .table-modern tbody, .table-modern tr, .table-modern td {
        display: block;
        width: 100%;
    }

    .table-modern tr.service-data-row {
        margin-bottom: 1rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.5rem;
        background: #ffffff;
    }

    .table-modern td {
        text-align: right;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #f1f5f9;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .table-modern td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #64748b;
        font-size: 0.85rem;
        text-transform: uppercase;
    }

    .table-modern td.service-name-cell {
        display: block;
        text-align: left;
        font-weight: 600;
        background: #f8fafc;
        border-radius: 6px;
        margin-bottom: 0.5rem;
    }
    
    .table-modern td.service-name-cell::before {
        display: block;
        margin-bottom: 0.25rem;
    }

    .btn-action-view {
        width: 100%;
        text-align: center;
        padding: 0.65rem;
    }
}