@import url("responsive/full.css");
@import url("responsive/1400.css") (max-width: 1400px);
@import url("responsive/1200.css") (max-width: 1200px);
@import url("responsive/1024.css") (max-width: 1024px);
@import url("responsive/992.css") (max-width: 992px);
@import url("responsive/834.css") (max-width: 834px);
@import url("responsive/768.css") (max-width: 768px);
@import url("responsive/576.css") (max-width: 576px);
@import url("responsive/476.css") (max-width: 476px);
@import url("responsive/428.css") (max-width: 428px);
@import url("responsive/414.css") (max-width: 414px);
@import url("responsive/390.css") (max-width: 390px);
@import url("responsive/375.css") (max-width: 375px);
@import url("responsive/375.css") (max-width: 320px);

/* =========================================================
   BOI THEME OVERRIDE
   Agriculture + Technology + AI
========================================================= */
:root {
    --boi-green: #66c978;
    --boi-green-2: #9fe66f;
    --boi-deep-green: #123d2d;
    --boi-dark: #0a241c;
    --boi-dark-2: #10382b;

    --boi-cyan: #55cbd4;
    --boi-blue: #3f8dd8;
    --boi-yellow: #f4c95d;

    --boi-white: rgba(255, 255, 255, .96);
    --boi-muted: rgba(255, 255, 255, .80);

    --boi-glow-green: 0 0 22px rgba(102, 201, 120, .22);
    --boi-glow-cyan: 0 0 22px rgba(85, 203, 212, .18);
    --boi-glow-yellow: 0 0 20px rgba(244, 201, 93, .16);

    --boi-gradient-main: linear-gradient(
        135deg,
        #72cf7f 0%,
        #9fe66f 100%
    );

    --boi-gradient-main-hover: linear-gradient(
        135deg,
        #81d98c 0%,
        #acf07b 100%
    );

    --boi-gradient-dark: linear-gradient(
        135deg,
        #0a241c 0%,
        #123d2d 100%
    );
}

html,
body {
    font-family: "Kanit", sans-serif;
}

#boi-register-modal {
    z-index: 1055;
}

.modal-backdrop {
    z-index: 1050;
}

.swal2-container {
    z-index: 10600 !important;
}

/* =========================================================
   BUTTONS THEME
========================================================= */
.btn-pp-le,
.btn-boi {
    color: #062018;
    background: var(--boi-gradient-main);
    border-color: rgba(167, 240, 109, .45);
    box-shadow: var(--boi-glow-green);
    font-weight: 600;
}

.btn-pp-le:hover,
.btn-boi:hover {
    color: #061915;
    background: var(--boi-gradient-main-hover);
    border-color: rgba(71, 219, 232, .58);
    filter: brightness(1.03);
}

.btn-pp-le:focus,
.btn-boi:focus {
    box-shadow:
        0 0 0 .25rem rgba(116, 214, 128, .25),
        var(--boi-glow-cyan);
}

/* =========================================================
   BOI TEXT COLORS
========================================================= */
.text-boi,
.text-pp-le {
    color: var(--boi-green) !important;
}

.text-boi-dark,
.text-purple {
    color: var(--boi-deep-green) !important;
}

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

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

.text-boi-gradient {
    background: var(--boi-gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* =========================================================
   BOI BACKGROUND COLORS
========================================================= */
.bg-boi-color,
.bg-le-color {
    background-color: var(--boi-deep-green) !important;
}

.bg-boi-gradient {
    background: var(--boi-gradient-main) !important;
}

.bg-boi-dark {
    background: var(--boi-gradient-dark) !important;
}

.bg-boi-soft {
    background:
        radial-gradient(circle at top left, rgba(116, 214, 128, .16), transparent 34%),
        radial-gradient(circle at bottom right, rgba(71, 219, 232, .14), transparent 36%),
        #f4fbf5 !important;
}

/* =========================================================
   BOI DECORATION UTILITIES
========================================================= */
.boi-card-glass {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(11, 47, 36, .10);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(6, 25, 21, .10);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.boi-section-dark {
    color: #fff;
    background:
        radial-gradient(circle at 16% 20%, rgba(116, 214, 128, .20), transparent 35%),
        radial-gradient(circle at 86% 28%, rgba(71, 219, 232, .16), transparent 38%),
        var(--boi-gradient-dark);
}

.boi-line-gradient {
    width: 72px;
    height: 5px;
    border-radius: 999px;
    background: var(--boi-gradient-main);
}

/* =========================================================
   COMMON UTILITIES
========================================================= */
.display-none {
    display: none;
}

.display-block {
    display: block;
}

.display-none-im {
    display: none !important;
}

.display-block-im {
    display: block !important;
}

.cursor-pt {
    cursor: pointer;
}

.not-allowed {
    cursor: not-allowed;
}

@media (max-width: 575.98px) {
    .boi-loader-inner {
        padding: 30px 22px;
        border-radius: 24px;
    }

    .boi-loader-logo {
        width: 82px;
        height: 82px;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {

    #boi-preloader::before,
    .boi-orbit,
    .boi-loader-bar span {
        animation: none;
    }
}

/* =========================================================
   BOI TOP NAVBAR
   CLEAN GREEN ORGANIC TONE
   Bootstrap compatible
========================================================= */

/* =========================================================
   FIXED TRANSPARENT NAVBAR
========================================================= */

:root {
    --boi-navbar-height: 76px;
    --boi-navbar-height-mobile: 68px;
}

.boi-topbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    width: 100%;
    /* border-bottom: 1px solid rgba(255, 255, 255, .30); */
    /* background: rgba(255, 255, 255, .42); */
    background: transparent !important;
    /* box-shadow:
        0 8px 28px rgba(25, 68, 43, .08),
        inset 0 -1px 0 rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%); */
}

.boi-navbar {
    min-height: var(--boi-navbar-height);
    padding: 8px 0;
}

/*
 * เผื่อพื้นที่ให้ Navbar แบบ fixed
 * เลือกใช้กับ element หลักของหน้า
 */
/* .boi-main {
    padding-top: var(--boi-navbar-height);
} */

/* =========================================================
   NAVBAR BRAND
========================================================= */

.boi-navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin-right: 18px;
    color: #193f2b;
    text-decoration: none;
}

.boi-navbar-brand:hover {
    color: #193f2b;
}

.boi-navbar-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    height: 48px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.boi-navbar-logo img {
    display: block;
    width: auto;
    max-width: 132px;
    height: 46px;
    padding: 0;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 4px 7px rgba(8, 37, 23, .12));
}

.boi-navbar-title {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.boi-navbar-title strong {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0;
    color: #193f2b;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .1px;
}

.boi-navbar-title strong::after {
    display: none;
}

.boi-navbar-title-cmu {
    color: #193f2b;
}

.boi-navbar-title-cross {
    color: #31915f;
    font-size: 18px;
    font-weight: 500;
}

.boi-navbar-title-boi {
    position: relative;
    color: #168657;
}

.boi-navbar-title-boi::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -5px;
    left: 0;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4ebf78, #28a56b);
}

.boi-navbar-title small {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: rgba(25, 63, 43, .64);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .15px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   NAVBAR TOGGLER
========================================================= */

.boi-navbar-toggler {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(24, 102, 67, .14);
    border-radius: 14px;
    color: #173b28;
    background: rgba(255, 255, 255, .74);
    box-shadow:
        0 8px 20px rgba(23, 59, 40, .10),
        inset 0 1px 0 rgba(255, 255, 255, .80);
}

.boi-navbar-toggler:focus {
    box-shadow:
        0 0 0 .2rem rgba(33, 160, 107, .14),
        0 8px 20px rgba(23, 59, 40, .10);
}

/* =========================================================
   NAVBAR ACTIONS
========================================================= */

.boi-navbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
}

.boi-navbar-link,
.boi-navbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

/* =========================================================
   PRIMARY BUTTON
========================================================= */

.boi-navbar-btn {
    color: #ffffff;
    border: 1px solid rgba(25, 102, 67, .14);
    background: linear-gradient(135deg, #245d3e 0%, #31845a 100%);
    box-shadow:
        0 8px 20px rgba(22, 86, 57, .18),
        inset 0 1px 0 rgba(255, 255, 255, .20);
}

.boi-navbar-btn i {
    color: #ffffff;
}

.boi-navbar-btn:hover {
    color: #ffffff;
    background: linear-gradient(135deg, #1d5035 0%, #27754e 100%);
    transform: translateY(-1px);
    box-shadow:
        0 12px 26px rgba(22, 86, 57, .24),
        inset 0 1px 0 rgba(255, 255, 255, .24);
}

/* =========================================================
   SECONDARY LINK
========================================================= */

.boi-navbar-link {
    color: #28543d;
    border: 1px solid rgba(38, 100, 67, .14);
    background: rgba(255, 255, 255, .58);
    box-shadow:
        0 5px 14px rgba(30, 80, 53, .06),
        inset 0 1px 0 rgba(255, 255, 255, .72);
}

.boi-navbar-link i {
    color: #25805a;
}

.boi-navbar-link:hover {
    color: #173d2a;
    border-color: rgba(33, 160, 107, .28);
    background: rgba(237, 250, 242, .82);
    transform: translateY(-1px);
    box-shadow:
        0 8px 18px rgba(30, 80, 53, .10),
        inset 0 1px 0 rgba(255, 255, 255, .82);
}

/* =========================================================
   LINE BUTTON
========================================================= */

.boi-navbar-line {
    color: #176638;
    border-color: rgba(29, 175, 81, .20);
    background: rgba(231, 250, 236, .78);
}

.boi-navbar-line i {
    color: #20a653;
    font-size: 17px;
}

.boi-navbar-line:hover {
    color: #12582f;
    border-color: rgba(29, 175, 81, .34);
    background: rgba(218, 247, 226, .94);
    box-shadow:
        0 9px 20px rgba(18, 91, 48, .10),
        inset 0 1px 0 rgba(255, 255, 255, .82);
}

/* =========================================================
   OUTLINE BUTTON
========================================================= */

.boi-navbar-btn-outline {
    color: #765707;
    border: 1px solid rgba(197, 139, 19, .24);
    background: rgba(255, 246, 218, .74);
    box-shadow: none;
}

.boi-navbar-btn-outline i {
    color: #b27b0e;
}

.boi-navbar-btn-outline:hover {
    color: #5a430a;
    border-color: rgba(197, 139, 19, .38);
    background: rgba(255, 239, 192, .94);
    box-shadow: 0 9px 20px rgba(81, 67, 20, .08);
}

/* =========================================================
   FOCUS
========================================================= */

.boi-navbar-brand:focus-visible,
.boi-navbar-link:focus-visible,
.boi-navbar-btn:focus-visible {
    outline: 2px solid #31915f;
    outline-offset: 3px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199.98px) {
    .boi-navbar-link,
    .boi-navbar-btn {
        padding: 9px 12px;
        font-size: 12px;
    }

    .boi-navbar-title strong {
        font-size: 18px;
    }

    .boi-navbar-title small {
        font-size: 10px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 991.98px) {
    .boi-navbar {
        min-height: var(--boi-navbar-height-mobile);
        padding: 8px 0;
    }

    .boi-main {
        padding-top: var(--boi-navbar-height-mobile);
    }

    .boi-navbar-logo {
        height: 44px;
    }

    .boi-navbar-logo img {
        max-width: 118px;
        height: 42px;
    }

    .boi-navbar .navbar-collapse {
        margin-top: 10px;
        padding: 12px;
        border: 1px solid rgba(34, 98, 65, .13);
        border-radius: 20px;
        background: rgba(255, 255, 255, .84);
        box-shadow:
            0 14px 32px rgba(25, 74, 48, .14),
            inset 0 1px 0 rgba(255, 255, 255, .90);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
        backdrop-filter: blur(18px) saturate(145%);
    }

    .boi-navbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        gap: 9px;
    }

    .boi-navbar-link,
    .boi-navbar-btn {
        width: 100%;
        min-height: 46px;
        padding: 10px 12px;
        font-size: 14px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 575.98px) {
    .boi-navbar-brand {
        gap: 8px;
        max-width: calc(100% - 56px);
    }

    .boi-navbar-logo {
        height: 40px;
    }

    .boi-navbar-logo img {
        max-width: 92px;
        height: 38px;
    }

    .boi-navbar-title strong {
        gap: 5px;
        font-size: 15px;
    }

    .boi-navbar-title-cross {
        font-size: 14px;
    }

    .boi-navbar-title small {
        max-width: 180px;
        margin-top: 6px;
        font-size: 9px;
    }

    .boi-navbar-toggler {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }
}

@media (max-width: 390px) {
    .boi-navbar-logo img {
        max-width: 78px;
    }

    .boi-navbar-title strong {
        font-size: 14px;
    }

    .boi-navbar-title small {
        max-width: 145px;
        font-size: 8px;
    }
}

/* =========================================================
   BOI REGISTER / CHECK STATUS BUTTON
   ใช้ร่วมกันทั้งหน้า Index และ Detail
========================================================= */

.boi-register-open-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 14px 20px;
    overflow: hidden;
    border: 1px solid rgba(71, 219, 232, .28);
    border-radius: 18px;
    color: #ffffff;
    background:
        radial-gradient(circle at 16% 20%,
            rgba(167, 240, 109, .20),
            transparent 34%),
        radial-gradient(circle at 86% 20%,
            rgba(71, 219, 232, .18),
            transparent 36%),
        var(--boi-gradient-dark);
    box-shadow:
        0 14px 30px rgba(6, 25, 21, .20),
        0 7px 18px rgba(71, 219, 232, .10),
        inset 0 1px 0 rgba(255, 255, 255, .14);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .15px;
    text-decoration: none;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        filter .25s ease;
}

.boi-register-open-btn::before {
    content: "";
    position: absolute;
    top: -90%;
    left: -45%;
    width: 34%;
    height: 270%;
    z-index: -1;
    background: rgba(255, 255, 255, .18);
    transform: rotate(24deg) translateX(-170%);
    transition: transform .55s ease;
}

.boi-register-open-btn:hover,
.boi-register-open-btn:focus {
    color: #ffffff;
    border-color: rgba(167, 240, 109, .44);
    background:
        radial-gradient(circle at 16% 20%,
            rgba(167, 240, 109, .26),
            transparent 36%),
        radial-gradient(circle at 86% 20%,
            rgba(71, 219, 232, .23),
            transparent 38%),
        var(--boi-gradient-dark);
    transform: translateY(-3px);
    filter: brightness(1.06);
    box-shadow:
        0 20px 42px rgba(6, 25, 21, .25),
        0 10px 24px rgba(71, 219, 232, .16),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.boi-register-open-btn:hover::before {
    transform: rotate(24deg) translateX(530%);
}

.boi-register-open-btn:focus {
    outline: 0;
    box-shadow:
        0 0 0 .25rem rgba(116, 214, 128, .18),
        0 20px 42px rgba(6, 25, 21, .22);
}

.boi-register-open-btn:active {
    color: #ffffff;
    transform: translateY(-1px);
}

.boi-register-open-btn i {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #062018;
    background: var(--boi-gradient-main);
    box-shadow:
        0 7px 16px rgba(116, 214, 128, .20),
        inset 0 1px 0 rgba(255, 255, 255, .42);
    transition:
        transform .25s ease,
        filter .25s ease;
}

.boi-register-open-btn:hover i {
    transform: translateX(3px);
    filter: brightness(1.06);
}

/* ป้องกัน margin-top:auto ของ .boi-course-btn
   ทำให้ระยะปุ่มในหน้า Index ผิด */
.boi-course-actions .boi-course-btn,
.boi-course-actions .boi-register-open-btn {
    width: 100%;
    margin-top: 0;
}

/* ให้ไอคอนปุ่มรายละเอียดเหมือนเดิม
   โดยไม่ต้องใส่ me-2 ใน HTML */
.boi-course-actions .boi-course-btn {
    gap: 10px;
}

@media (max-width: 575.98px) {
    .boi-register-open-btn {
        min-height: 49px;
        padding: 13px 16px;
        border-radius: 16px;
        font-size: 14px;
    }

    .boi-register-open-btn i {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .boi-register-open-btn,
    .boi-register-open-btn::before,
    .boi-register-open-btn i {
        transition: none;
    }
}

/* =========================================================
   BOI INDEX FOOTER
========================================================= */

.boi-index-footer {
    position: relative;
    z-index: 2;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(circle at 12% 0%, rgba(116, 214, 128, .10), transparent 28%),
        linear-gradient(135deg, #123923 0%, #174b30 100%);
    box-shadow:
        0 -10px 28px rgba(18, 57, 35, .08),
        inset 0 1px 0 rgba(255, 255, 255, .04);
}

.boi-index-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.boi-index-footer-copyright {
    margin: 0;
    color: rgba(255, 255, 255, .84);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
}

.boi-index-footer-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.boi-index-footer-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(255, 255, 255, .90);
    background: rgba(255, 255, 255, .06);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.boi-index-footer-nav a i {
    color: #a7f06d;
    font-size: 13px;
}

.boi-index-footer-nav a:hover {
    color: #ffffff;
    border-color: rgba(167, 240, 109, .20);
    background: rgba(167, 240, 109, .10);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(8, 35, 21, .12);
}

.boi-index-footer-nav a:focus-visible {
    outline: 2px solid #a7f06d;
    outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE FOOTER
========================================================= */

@media (max-width: 767.98px) {
    .boi-index-footer {
        padding: 20px 0;
    }

    .boi-index-footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .boi-index-footer-nav {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .boi-index-footer-inner {
        align-items: center;
        text-align: center;
    }

    .boi-index-footer-copyright {
        font-size: 12px;
    }

    .boi-index-footer-nav {
        justify-content: center;
    }

    .boi-index-footer-nav a {
        min-height: 40px;
        padding: 9px 12px;
        font-size: 12px;
    }
}