:root {
    --bg-nav-color: #000000;

    --focus-shadow-rgb: 49, 132, 253;
    --active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --main-font-color: #fff;

    /* main btn color  */
    --primary-gradient: linear-gradient(45deg, #63ccb1, #429280);
    --primary-hover-gradient: linear-gradient(45deg, #56b7a1, #387c71);
    --primary-border: #218838;
    --primary: #63ccb1;
    --primary-hover: #56b7a1;
    --primary-sub: #b7f6eba6;


    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #ffffff;
    --dark: #343a40;

    --card-bg-main: #111816;
    --card-bg-sub: #10221e;
}

body {
    color: #586a8f;
}

input {
    border-radius: 26px !important;
}


#welcome {
    background-image: url('../img/bg2560x1362.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    height: 100vh;
    padding-top: 50px;
}

#service {
    padding-top: 25px;
    background-color: #253430;
    background: linear-gradient(164deg, #253430 70%, #63ccb1 71%, #253430 100%);
}

#promotion {
    padding-top: 25px;
    background-color: #111a18;
}

#package {
    padding: 25px 25px 25px 25px;
    background-color: #253430;
}

#contact {
    padding-top: 25px;
    background-color: #202324;
}

@media (max-width: 768px) {
    #welcome {
        background-image: url('../img/bg768x681.webp');
    }
}

@media (max-width: 720px) {
    #welcome {
        background-image: url('../img/bg720x1322.webp');
    }

    #sec2 {
        background: linear-gradient(145deg, #253430 84%, #63ccb1 85%, #253430 100%);
    }
}



.card {
    background-color: var(--card-bg-main);
    border-radius: 26px;
}

.card-bg-sub {
    background-color: var(--card-bg-sub);
}

.border-primary {
    border: 2px solid var(--primary);
    border-color: var(--primary) !important;
}

hr {
    border-top: 2px solid var(--primary);
}

.text-primary {
    color: var(--primary) !important;
}

.navbar-dark {
    background-color: var(--bg-nav-color) !important;
}

.bg-dark {
    background-color: var(--bg-nav-color) !important;
}

.bg-light {
    background-color: var(--light) !important;
}

.btn-close {
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

.btn-close-black {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--bs-btn-close-opacity);
}


.btn-primary {
    background: var(--primary-gradient);
    border-color: var(--primary-border);

    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary);
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-border);
    --bs-btn-focus-shadow-rgb: var(--focus-shadow-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-border);
    --bs-btn-active-shadow: var(--active-shadow);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-hover);
    --bs-btn-hover-border-color: var(--primary-border);
    --bs-btn-focus-shadow-rgb: var(--focus-shadow-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-hover);
    --bs-btn-active-border-color: var(--primary-border);
    --bs-btn-active-shadow: var(--active-shadow);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--primary);
    --bs-btn-disabled-border-color: var(--primary);
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-sub {
    background-color: var(--primary-sub) !important;
}

/* owner */
.content-wrapper {
    background-color: #f8f9fa;
    height: 100vh;
    overflow: auto;
}

.bg-owner {
    background-color: #f6f7fb;
}

.shadow-bottom {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.shadow-right {
    box-shadow: 5px 0 10px 0 rgba(0, 0, 0, 0.1);
}

.menu-hide {
    width: 70px;
    transition: 0.1s ease-in;
}

.menu-hide span {
    display: none;
}

.nav-link {
    color: var(--secondary);
    border-radius: 26px;
}

/* //nav-link color hover  */
.nav-link:hover {
    color: var(--primary);
}

.nav-pills {
    color: var(--secondary);
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background: var(--primary-gradient);
    border-color: var(--primary-border);
}

.nav-pills .nav-link {
    border-radius: 26px 0 0 26px;
}

.nav-link-msg {
    color: var(--primary) !important;
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}


.nav-link-msg:hover {
    color: #fff !important;
    background-color: var(--primary) !important;
}

.nav-link-msg.active {
    color: #fff !important;
    background-color: var(--primary) !important;
}


.fs-7 {
    font-size: 0.775rem !important;
}

.fs-8 {
    font-size: 0.675rem !important;
}

.msg-hide {
    display: none;
}

.msg-show {
    display: block;
}

/* mobile preview */
.sender {
    /* font-family: Prompt; */
    margin-top: 42px;
    font-size: 10px;
    color: #586a8f !important;
    height: 12px
}

.preview-message {
    margin-top: 1.5% !important;
    margin-right: 15px;
    margin-left: 15px;
    background-color: #f9f9f9;
    padding: 5px !important;
    max-width: 140px;
    width: auto;
    border-radius: 8px !important
}

.preview-message,
pre {
    color: #586a8f !important;
    /* font-family: Prompt; */
    font-size: 12px
}

pre {
    overflow: unset !important;
    white-space: pre-wrap !important;
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap !important;
    white-space: -o-pre-wrap !important;
    word-wrap: break-word !important
}

.fixHeight {
    max-height: 280px;
    overflow: auto
}


.progressbar {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    position: relative;
    counter-reset: step;
    /* สำหรับเลขลำดับ (ถ้าจำเป็น) */
}

.progressbar li {
    display: flex;
    flex-direction: column;
    /* เรียงจากบนลงล่าง */
    align-items: center;
    /* จัดให้อยู่ตรงกลาง */
    position: relative;
    width: 33.33%;
    /* ปรับให้แต่ละจุดครอบคลุมพื้นที่เท่ากัน */
    text-align: center;
}


.progressbar li::before {
    content: '';
    width: 30px;
    height: 30px;
    border: 2px solid #ccc;
    /* สีของเส้นขอบ */
    border-radius: 50%;
    /* ทำให้เป็นวงกลม */
    background-color: white;
    z-index: 2;
    /* นำหน้าขีดเส้น */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.progressbar li.active::before {
    border-color: var(--primary);
    /* สีของวงกลมเมื่อ active */
    background-color: var(--primary);
}

.progressbar li i {
    font-size: 16px;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    color: var(--secondary);
}

.progressbar li.active i {
    color: #fff;
}

.progressbar li strong {
    margin-top: 0px;
    color: var(--secondary);
    /* ระยะห่างระหว่างชื่อและวงกลม */
}

.progressbar li.active strong {
    color: #000;
}

.progressbar li::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #ccc;
    /* สีของเส้น */
    top: 15px;
    left: -50%;
    z-index: 1;
}

.progressbar li:first-child::after {
    content: none;
}

.progressbar li.active::after {
    background-color: var(--primary);
}

.border-dashed {
    border: 2px dashed #007bff;
}

.uploaded_hide {
    display: none;
}

.uploaded_show {
    display: block;
}

.table-primary {
    --bs-table-color: #fff;
    --bs-table-bg: var(--primary);
    --bs-table-border-color: var(--primary);
    --bs-table-striped-bg: var(--primary);
    --bs-table-striped-color: #fff;
    --bs-table-active-bg: var(--primary-hover);
    --bs-table-active-color: #fff;
    --bs-table-hover-bg: var(--primary-hover);
    --bs-table-hover-color: #fff;
    color: var(--bs-table-color);
    border-color: var(--primary-hover);
}