@font-face {
    font-family: 'krungthaifast-light-webfont';
    src: url('../lib/ktfont/krungthaifast-light-webfont.ttf') format('truetype');
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.fs08 {
    font-size: 0.8em;
}

.title-eng {
    font-size: 0.9rem;
    color: #e2e1e1;
}

.title-th {
    color: #e2e1e1;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    height: 100%;
}
/*hr {
    height: 1px; border: none; background: linear-gradient(to right, transparent, var(--bs-primary), transparent);
}
*/
body {
    background: linear-gradient(180deg, #cfeefd 0%, #eaf6ff 50%, #f8fcff 100%);
    font-family: 'krungthaifast-light-webfont' !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bg-mainbody {
    background: #beeffe;
}

main {
    flex: 1; /* ดัน footer ให้อยู่ล่างสุด */
}


input[readonly].form-control {
    background-color: var(--bs-gray-100);
}

form .form-control::-webkit-input-placeholder {
    opacity: 0.5;
    font-size: 0.9em;
}

/*Bootstrap Calendar*/
.datepicker {
    border-radius: 0;
    padding: 0;
}

.datepicker-days table thead, .datepicker-days table tbody, .datepicker-days table tfoot {
    padding: 5px;
    display: list-item;
}

.datepicker-days table thead, .datepicker-months table thead, .datepicker-years table thead, .datepicker-decades table thead, .datepicker-centuries table thead {
    background: var(--bs-primary);
    color: #ffffff;
    border-radius: 0;
}

    .datepicker-days table thead tr:nth-child(2n+0) td, .datepicker-days table thead tr:nth-child(2n+0) th {
        border-radius: 3px;
    }

    .datepicker-days table thead tr:nth-child(3n+0) {
        text-transform: uppercase;
        font-weight: 300 !important;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.7);
    }

.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
    padding: 11px 13px;
}

.datepicker-months table thead td, .datepicker-months table thead th, .datepicker-years table thead td, .datepicker-years table thead th, .datepicker-decades table thead td, .datepicker-decades table thead th, .datepicker-centuries table thead td, .datepicker-centuries table thead th {
    border-radius: 0;
}

.datepicker td, .datepicker th {
    border-radius: 50%;
    padding: 0 12px;
}

.datepicker-days table thead, .datepicker-months table thead, .datepicker-years table thead, .datepicker-decades table thead, .datepicker-centuries table thead {
    background: var(--bs-primary);
    color: #ffffff;
    border-radius: 0;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
    background-image: none;
}

.datepicker .prev, .datepicker .next {
    color: rgba(255, 255, 255, 0.5);
    transition: 0.3s;
    width: 37px;
    height: 37px;
}

    .datepicker .prev:hover, .datepicker .next:hover {
        background: transparent;
        color: rgba(255, 255, 255, 0.99);
        font-size: 21px;
    }

.datepicker .datepicker-switch {
    font-size: 24px;
    font-weight: 400;
    transition: 0.3s;
}

    .datepicker .datepicker-switch:hover {
        color: rgba(255, 255, 255, 0.7);
        background: transparent;
    }

.datepicker table tr td span {
    border-radius: 2px;
    margin: 3%;
    width: 27%;
}

    .datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
        background-color: var(--bs-primary);
        background-image: none;
    }

.dropdown-menu {
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}

.datepicker-dropdown.datepicker-orient-top:before {
    border-top: 7px solid rgba(0,0,0,.1);
}

.mw-90 {
    min-width: 90px;
}
/*End Calendar*/

.custom-tooltip {
    --bs-tooltip-bg: var(--bs-info);
}

.listep {
    border-radius: 30px;
    font-size: 18px;
    border: 2px solid rgb(0, 0, 0, 0.20);
}

#progressbar li:before {
    position: absolute;
    left: 35px;
    top: 39px;
    content: "";
    height: 42px;
    border-left: 2px solid rgb(0, 0, 0, 0.20);
    z-index: 100;
}

#progressbar li:last-of-type:before {
    border: none;
}

.rigishead {
    height: 60px;
}

.userinfo {
    font-size: 12px;
}

.logo {
    width: 80px;
}

.ktx-text {
    font-size: 25px;
    font-weight: bold;
    color: white;
}

.kt {
    color: white;
}

.x {
    color: #4CAF50; /* สีเขียว */
}
.ebond {
    color: white;
    font-size: 22px;
}

@media (min-width: 768px) {
    .logo {
        width: 100px;
    }
}
.hero {
    background-color: rgb(11, 119, 228);
    background-image: url('../images/banner.jpg');
    background-size: cover;
    background-position: right;
    color: white;
    padding: 90px 0 50px;
}
.card-bg-header {
    background: linear-gradient(to right,rgb(200, 230, 254),rgb(142, 199, 254));
}
.btn-bg-primary {
    background: linear-gradient(to bottom,rgb(32, 145, 253),rgb(141, 203, 253));
    border-color: rgb(32, 145, 253);
}
.feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #0b77e4;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 15px;
}

.cardQuota {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s;
}

    .cardQuota:hover {
        transform: translateY(-8px);
    }
.quota-card {
    background: linear-gradient(135deg, #eaf6ff 0%, #ffffff 100%);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(11, 55, 85, 0.12);
    overflow: hidden;
    border: 1px solid rgba(11,55,85,0.06);
}
.issuer-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(90deg,#dbefff, #eaf6ff);
    padding: 14px 18px;
}
.bond-card {
    border-left: 2px solid var(--bs-primary);
    border-bottom: 0px;
    border-top: 0px;
    border-right: 0px;
}

.page-title {
    font-weight: 600;
    color: #0b3b5f;
}

.page-sub {
    color: #4a6b7f;
    font-size: 0.99rem;
}
.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(11,55,85,0.06);
}

    .info-row:last-of-type {
        border-bottom: none;
    }

.label {
    color: #485e6b;
    font-weight: 600;
}

.value {
    color: #0b3b5f;
    font-weight: 700;
}

.muted-note {
    color: #6c8794;
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.btn-outline-custom {
    border-radius: 999px;
    padding: 10px 18px;
    border: 1px solid rgba(11,76,130,0.12);
}

.btn-primary-custom {
    border-radius: 999px;
    padding: 10px 18px;
    box-shadow: 0 6px 18px rgba(11,118,230,0.18);
}
.symbol-name {
    color: #486a79;
    font-size: 0.96rem;
}

.symbol-logo {
    width: 60px;
}
.col-sticky-right {
    position: sticky;
    right: 0;
    z-index: 2;
}

.col-sticky-left {
    position: sticky;
    left: 0;
    z-index: 2;
}