/* === Legacy theme overrides (color and typography) === */

/* Base */
body {
    padding: 0;
    margin: 0;
    font-size: 13px;
    line-height: 25px;
    font-family: Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
    background-color: #F7F2ED;
    border-top: 0 !important; /* remove any top border */
}

/* Inputs */
input[type=text], input[type=file], select {
    padding: 6px 5px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    height: 35px;
}
input[type=radio] { margin: 3px 3px 0 5px; }

@media (min-width: 992px) {
    input[type=text], input[type=password], input[type=file], select {
        padding: 6px 10px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
        height: 35px;
    }
}

/* Links */
a { color: #000000; }
a:hover, a:visited, a:active { color: #000000; }

/* Typography defaults for tables/td/div */
table, td, div {
    font-size: 13px;
    line-height: 25px;
    font-family: Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
}
table { border-collapse: initial !important; }

/* Labels */
label { display: initial; font-weight: normal; }

/* Layout helpers */
.container {
    width: 80%;
    margin: auto;
    max-width: inherit !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.mainBody { width: 100%; }
.space { line-height: 20px; }

/* Header text */
.txtHeader1 { color: #D83A74; font-size: 26px; }
.txtHeader2 { color: #D83A74; font-size: 32px; font-weight: bold; }

/* Tabs/menu */
.tabMenu_Active {
    margin: 5px 0 0 0;
    float: left;
    color: #20AAF3;
    height: 40px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: bold;
}
.tabMenu {
    margin: 5px 0 0 0;
    float: left;
    color: #000000;
    height: 40px;
    padding: 5px 10px;
    cursor: pointer;
    font-weight: bold;
}
.tabMenu .tabLink {
    color: inherit;
    text-decoration: none;
    padding: 8px 10px;
}

/* Active/hover/focus state for menu tabs (light pink) */
.menuBar .tabMenu .tabLink:hover,
.menuBar .tabMenu .tabLink:focus,
.menuBar .tabMenu .tabLink:active,
.menuBar .tabMenu.active .tabLink {
    background-color: #ffd6e8 !important; /* ชมพูอ่อน */
    color: #000 !important;
    border-radius: 6px;
    text-decoration: none;
    outline: none;
}

/* Utilities */
.txtCenter { text-align: center; }
.tdBody { padding: 0; }
.lineSolid { height: 1px; background-color: #CFCFCF; }

/* CMS blocks */
.cmsBox {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px 1px #E1E1E1;
}
.cmsTileBar { background-color: #ef4ea8; }
.horizontal-line {
    border-top: 3px solid #49c749;
    margin: 0 0;
}
.cmsTitleText {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 20px;
    padding: 10px 10px 5px 10px;
}
.cmsContent { 
    padding: 20px; 
    word-wrap: break-word; 
    overflow-wrap: anywhere; 
}
    /* ✅ FIX: ให้ class จาก Quill ทำงานจริง */
    .cmsContent .ql-align-center {
        text-align: center !important;
    }

    .cmsContent .ql-align-right {
        text-align: right !important;
    }

    .cmsContent .ql-align-left {
        text-align: left !important;
    }

    .cmsContent .ql-align-justify {
        text-align: justify !important;
    }

    /* กันกรณีมี tag ซ้อนแล้วโดนบังคับชิดซ้าย */
    .cmsContent h1.ql-align-center,
    .cmsContent h2.ql-align-center,
    .cmsContent p.ql-align-center,
    .cmsContent div.ql-align-center {
        text-align: center !important;
    }

    /* (ทางเลือก) ถ้าภาพใน center ยังไม่ยอมกลาง */
    .cmsContent .ql-align-center img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .cmsContent p {
        text-align: center;
    }

        .cmsContent p img,
        .cmsContent p a {
            display: inline-block !important;
            vertical-align: middle;
        }

    /* กัน CMS / reset CSS บังคับ img เป็น block */
    .cmsContent img {
        display: inline-block;
    }
/* Dropdown */
.dropdownButton {
    background-color: #a05bef;
    color: #fff;
    padding: 5px 20px;
    border: none;
    cursor: pointer;
    border-radius: 25px;
    font-weight: bold;
}

/* ให้ container / menu อยู่เหนือ progress bar และเป็นจุดอ้างอิงของ absolute */
.dropdownContainer {
    position: relative;
    display: inline-block;
    z-index: 2050;
}

.dropdownContent {
    display: none;
    position: absolute;
    top: 100%; /* ชิดใต้ปุ่ม ไม่มีช่องว่างให้ hover หลุด */
    right: 0;
    margin-top: 4px; /* ระยะห่างเล็กน้อย แต่ยังอยู่ในกรอบ container */
    background-color: #f9f9f9;
    min-width: 200px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 8px;
    z-index: 2100; /* สูงกว่า stepper แน่นอน */
}

.dropdownContainer a {
    color: #000;
    padding: 5px 10px;
    text-decoration: none;
    display: block;
}

.dropdownContent a:hover {
    background-color: #f1f1f1;
}

/* เปิดเมนูทั้งตอน hover ปุ่ม/กรอบ และตอนอยู่บนเมนูเอง เพื่อกันอาการเมนูหายกลางทาง */
.dropdownContainer:hover .dropdownContent,
.dropdownContent:hover {
    display: block;
}

.dropdownContainer:hover .dropdownButton {
    background-color: #a05bef;
}


/* Status table (colors) */
.statusTable { width: 75%; }
.statusTable .rowHeader { background-color: #067c18; }
.statusTable .rowSuccess { background-color: #06eb12; }
.statusTable td.title, .statusTable td.info {
    width: 50%;
    text-align: left;
    padding: 10px;
}
.statusTable td.info { font-weight: bold; }

/* Buttons (color-focused parts) */
.btnRegister,
.btnRegisterAgree,
.btnLogin,
.btnNewLogin,
.btnPrint,
.btnConfirm,
.btnConfirmRegister,
.btnPrintRegister,
.btnOnlinePayment,
.btnRegister2,
.btnRegister3,
.btnBarGreen {
    font-weight: bold;
    cursor: pointer;
}
.btnRegister,
.btnRegisterAgree,
.btnLogin,
.btnNewLogin { background: #ED028D; color: #fff; }
.btnPrint { background: #e9298d; color: #fff; }
.btnConfirm { background: #ef6c00; color: #fff; }
.btnConfirmRegister { background: #5BB95B; color: #fff; }
.btnPrintRegister { background: #e9298d; color: #fff; }
.btnOnlinePayment { background: #ef6c00; color: #fff; }
.btnRegister2 { background: #FF9999; color: #000; }
.btnRegister3 { background: #ef6c00; color: #fff; }
.btnBarGreen { background-color: #5DB85B; color: #FFFFFF; padding: 15px; }
.btnRegister:hover,
.btnRegisterAgree:hover,
.btnLogin:hover,
.btnNewLogin:hover,
.btnPrint:hover,
.btnConfirm:hover,
.btnConfirmRegister:hover,
.btnPrintRegister:hover,
.btnOnlinePayment:hover,
.btnRegister2:hover,
.btnRegister3:hover,
.btnBarGreen:hover {
    box-shadow: 1px 1px 5px #888888;
}
.btnRegisterAgree.disabled,
.btnConfirm:disabled,
.btnNewLogin:disabled,
.btnBarGreen:disabled {
    color: #EAEAEA;
    background: #888888;
    cursor: not-allowed;
}

/* Tables for printing/content */
.tableForm { width: 50%; border: 1px solid #CFCFCF; }
.tableForm td { border: .5px solid #CFCFCF; text-align: center; padding: 5px; }

.tablePrintExam {
    width: 100%;
    border-collapse: collapse;
    font-family: Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
}
.tablePrintExam td {
    border: 1px solid #000000;
    text-align: center;
    padding: 5px;
    width: 50%;
    font-family: Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
}

.tableinside, .tableinside td {
    width: 100%;
    border: none;
    text-align: center;
    padding: 5px;
    font-family: Tahoma, Verdana, "MS Sans Serif", Arial, sans-serif;
}

/* Misc */
label.error { color: red; }
.boxGreen { padding: 15px; background-color: #E0EFD8; color: #000; }
.blueBox { margin-top: 10px; border: 1px solid #5bc0de; float: left; padding-right: 10px; }
.blueBox .icon { margin: 5px; border-radius: 7px; background-color: #5bc0de; width: 15px; height: 15px; color: #fff; text-align: center; line-height: 15px; float: left; }
.blueBox .txtWitchIcon { color: #5bc0de; float: left; }
.blueBox2 { margin-top: 10px; border: 2px solid #5bc0de; }

/* Content table widths */
.contentTable { width: 80%; }
.contentTable .col100{width:100%}.contentTable .col90{width:90%}.contentTable .col85{width:85%}
.contentTable .col80{width:80%}.contentTable .col75{width:75%}.contentTable .col70{width:70%}
.contentTable .col60{width:60%}.contentTable .col50{width:50%}.contentTable .col40{width:40%}
.contentTable .col33{width:33.33%}.contentTable .col30{width:30%}.contentTable .col25{width:25%}
.contentTable .col20{width:20%}.contentTable .col15{width:15%}.contentTable .col10{width:10%}

/* Register table widths */
.registerTable { padding: 0 10px; }
.registerTable .col100{width:100%}.registerTable .col90{width:90%}.registerTable .col80{width:80%}
.registerTable .col75{width:75%}.registerTable .col70{width:70%}.registerTable .col60{width:60%}
.registerTable .col50{width:50%}.registerTable .col40{width:40%}.registerTable .col33{width:33.33%}
.registerTable .col30{width:30%}.registerTable .col25{width:25%}.registerTable .col20{width:20%}
.registerTable .col15{width:15%}.registerTable .col10{width:10%}.registerTable .col9{width:9%}.registerTable .col5{width:5%}

/* Small helpers */
.txtHead1 { font-weight: bold; text-decoration: underline; }
.txtWarning { color: #FF0000; }
.inputOrder { width: 50px; }
.bulletHeader { font-weight: bold; }
.registerTable .inputEnable, .registerTable .idCardEnable, .registerTable .passportEnable { background-color: #FFFFFF; }
.registerTable .inputDisable, .registerTable .idCardDisable, .registerTable .passportDisable { background-color: #EAEAEA; }

/* Captcha block */
.divCapchaContain { float: left; height: 70px; line-height: 70px; padding: 0 5px; }

/* Print slip box */
.tbPrintSlip { width: 55%; border: 1px solid #ED028D; padding: 20px 30px; }

/* Agreement blocks */
.tbAgreeAndLoad { border: 1px solid #224180; width: 80%; padding: 20px; }
.tbAgreeTitle { border: 1px solid #FD698C; background-color: #F9B9C9; width: 100%; padding: 30px 0; }
.tbAgreeTitle td { text-align: center; font-size: 30px; line-height: 50px; font-weight: bold; }

/* Datepicker image tweak */
img.ui-datepicker-trigger { cursor: pointer; right: 28px; position: relative; vertical-align: middle; }

/* ===== Responsive enhancements ===== */

/* Fluid media/content */
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Make the header stack on small screens */
.tu-header .tu-top img {
    width: clamp(56px, 10vw, 99px);
    height: auto;
}
.txtHeader1 { font-size: clamp(18px, 2.3vw, 26px); }
.txtHeader2 { font-size: clamp(20px, 2.6vw, 32px); }

/* Menu bar: scrollable pills on small screens, wrap on medium+ */
.menuBar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.tabMenu { flex: 0 0 auto; }
.tabMenu .tabLink {
    display: inline-block;
    padding: clamp(6px, 1.2vw, 10px) clamp(8px, 1.4vw, 14px);
    border-radius: 6px;
    white-space: nowrap;
}

/* Focus visibility for keyboard users */
.tabMenu .tabLink:focus-visible {
    outline: 2px solid #ef4ea8;
    outline-offset: 2px;
}


/* Dropdown: better mobile handling */
@media (max-width: 991.98px) {
    /* Container width and padding for small devices */
    .container {
        width: 100%;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .tu-header .tu-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    /* Turn tab bar into a horizontal scroller */
    .menuBar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        padding-bottom: 6px;
    }
    .menuBar::-webkit-scrollbar { height: 6px; }
    .menuBar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15); border-radius: 8px; }

    .tabMenu { flex: 0 0 auto; }

    /* Dropdown occupies full width and appears below the button */
    .dropdownContainer {
        position: static;
        margin-left: 8px; /* keep it aligned nicely at the end */
    }
    .dropdownContent {
        position: static;
        display: none; /* keep hover behavior, tap acts like hover on mobile */
        width: 100%;
        min-width: 0;
        margin-top: 6px;
        box-shadow: none;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
    }
        .dropdownContainer:hover .dropdownContent,
        .dropdownContent:hover {
            display: block;
        }
    .dropdownButton {
        padding: 8px 14px;
        border-radius: 20px;
    }
}

/* Medium screens: keep wrapping tabs, comfortable spacing */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .menuBar { flex-wrap: wrap; }
}

/* Card-like look for CMS blocks across sizes */
.cmsBox {
    border-radius: 10px;
    margin-bottom: 14px;
}

/* Footer tweaks for small screens */
@media (max-width: 575.98px) {
    .footer-modern .footer-card { padding: 12px; }
    .footer-modern p, .footer-modern .small { font-size: 12px; line-height: 1.5; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* --- Mobile menu button to fit theme --- */
.mobile-menu-btn {
    border-color: #7ac0da;
}

    .mobile-menu-btn:hover,
    .mobile-menu-btn:focus {
        background-color: #a4d4e6;
        border-color: #7ac0da;
    }

/* --- Offcanvas theming to match #7ac0da/#a4d4e6 --- */
.offcanvas-mainmenu {
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.98)), radial-gradient(700px 400px at 90% -20%, rgba(122,192,218,.10), transparent 60%);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

    .offcanvas-mainmenu .offcanvas-title {
        font-weight: 700;
        color: #3e5667;
    }

    .offcanvas-mainmenu .list-group-item {
        border: 0;
        padding: .75rem 1rem;
    }

        .offcanvas-mainmenu .list-group-item:hover {
            background: #a4d4e6;
        }

        .offcanvas-mainmenu .list-group-item.active {
            background: #7ac0da;
            color: #fff;
        }

/* Header scales on small screens */
.tu-header .tu-top {
    gap: 12px;
}

    .tu-header .tu-top img {
        width: clamp(56px, 10vw, 99px);
        height: auto;
    }

.txtHeader1 {
    font-size: clamp(18px, 2.2vw, 26px);
}

.txtHeader2 {
    font-size: clamp(16px, 2vw, 22px);
}

/* Tighten container paddings on small screens */
@media (max-width: 991.98px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Body card spacing for small devices */
    .tdBody {
        padding: 14px;
        border-radius: 8px;
    }
}

/* Make long lines wrap nicely */
.cmsContent, .tdBody {
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Optional: subtle divider for footer link row on xs */
@media (max-width: 575.98px) {
    .footer-modern .footer-card {
        padding: 12px;
    }

    .footer-modern p, .footer-modern .small {
        font-size: 12px;
        line-height: 1.5;
    }
}
.tu-header {
    position: relative;
    z-index: 2000; /* สูงกว่า stepper ที่ z-index 0/1 */
}

/* ยก dropdown menu ให้ลอยทับ component อื่น ๆ */
.dropdownContainer {
    position: relative; /* ทับค่าก่อนหน้าได้เลย */
    z-index: 2050;
}

.dropdownContent {
    z-index: 2100; /* กล่องเมนูอยู่เหนือ stepper แน่นอน */
}
/* === Login card styling === */

.login-card {
    border-radius: 18px;
    border: 1px solid rgba(0,0,0,.04);
    background: linear-gradient(180deg, #ffffff, #fdfdff);
}

.login-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.login-avatar {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: linear-gradient(135deg, #a05bef, #ef4ea8);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(0,0,0,.15);
    font-size: 1.6rem;
}

.login-title {
    font-weight: 700;
}

.login-subtitle {
    line-height: 1.3;
}

/* ปรับ input-group ให้ดูกลมกลืน */
.login-card .input-group-text {
    border-radius: .75rem 0 0 .75rem;
}

.login-card .form-control {
    border-radius: 0 .75rem .75rem 0;
}

/* Mobile spacing */
@media (max-width: 575.98px) {
    .login-card {
        border-radius: 14px;
    }
}