/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[12].use[3]!./src/app/style/public-page.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/

:root {
    --body-color: #f7f7f7;
    --card-color: #fff;
    --header-color: #fff;
    --header-shadow:rgba(10, 75, 85, .05);
    --font-scale: 1;
    --border-box-color: #ededed;
    --scroll-color-main-public:#1e3e6e;
    --scroll-color-main-background:#f1f1f1;
    --scroll-color-drak-blue:#1e3e6e;
    --scroll-color-background:#f1f1f1;
    --scroll-color-hover:#1e3f73;
    --border-footer-color:#7f7f7f;
    --theme-color-default:#033F99;
    --theme-color-second:#2075F6;
    --theme-color-seconds:#A8C1E6;
    --btn-color-default: var(--theme-color-default);
    --input-background-color: #fff;
    --input-background-color-disabled:#e9ecef;
    /* ปุ่ม ขาว ข้อความ น้ำเงิน */
    --btn-light: #fff;
    --btn-text-light: var(--theme-color-default);
    --btn-border-light: var(--theme-color-default);
    /* ปุ่ม น้ำเงิน ข้อความ ขาว */
    --btn-dark: var(--theme-color-default);
    --btn-text-dark : #fff;
    --btn-boder-dark:var(--theme-color-default);

    /* Font Size*/
    --font-beeecm-size: 14px;
    --font-footer-size: calc(var(--font-beeecm-size) - 1px);

    --link-login-text-color:#7f7f7f;
    --body-font-color: #3d3d47;

    --scroll-color-default: rgba(32, 117, 246, 0.1);
    --sidebar-filter-width : 330px;
    --filter-tree-content-width:100%;

    --toggle-swith-height : 40px;
    --toggle-swith-width : 100PX;


    --switch-toggle-dark: var(--theme-color-second);
    --switch-toggle-boder-dark: var(--theme-color-seconds);
    --switch-toggle-boder-search : var(--theme-color-second);
    --switch-toggle--text-dark: #ffffff;

    --switch-toggle-knob-dark: #fff;

    --tag-bg-colors : #e2ecf9;
    --tag-text-color: #06388d;
    --tag-black-color: #000;
    --tag-bg-color-list : #06388d12;

    /*--bg-table-focus: #f4f8ff;*/
    --bg-table-focus: #f6f8ff;
    /*--bd-table-hover: #f5fbfe;*/
    --bd-table-hover: #fafbff;

    --footer-bg-color : #1c355a;
    --footer-bg-line-color : #e0e5ee;
    --public-btn-grey-color : #efefec;

    --public-layout-flag: "PUBLIC_LAYOUT";

    --public-border : 2px solid var(--border-box-color);
    --public-toggle-mode: #133965;
    --public-green-color: #059669;

    --public-status-cancel-text : #dc2626;
    --public-status-cancel-bg: #fcdbe0;

    --public-status-used-text :#1e3e6e;
    --public-status-used-bg : #e2ecf9;

    --public-status-nolegal-text:#ff8f00;
    --public-status-nolegal-bg:#ffe7c8;

    --public-status-default-text:#3D3D47;
    --public-status-default-bg:#ececec;


    /*Banner*/
    --banner-indicator-dot: #d1d5db;
    --banner-indicator-dot-hover: #9ca3af;
    --banner-arrow-disable:  #374151;
    --banner-arraow-color: var(--theme-color-default);
    --banner-title-color: var(--public-toggle-mode);


    /* Toggle colors - Light Mode */
    --toggle-bg: #033F99;
    --toggle-thumb: #ffffff;
    --toggle-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --toggle-thumb-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --sun-color: #f59e0b;
    --moon-color: #6b7280;

    --toggle-knob-svg-color: #3D3D47;
    --font-color-detail : #033F99;
    --pubilc-button-bg: #f5f9f9;
    --checkbox-color: #033F99;
    --arrow-sort-table: #0000FF;
    --public-page-font-color-disabled:rgba(0, 0, 0, .18);
    --public-page-font-color:rgba(0,0,0,.54);
    --public-page-footer-hover:rgba(0,0,0,.12);
    --filter-arraow-hover-color: #3d3d47;
    --input-text-color-disabled-hover: var(--body-font-color);

    --file-subtitle-color: #1E3F6F;
    --file-subtitle-color-dot: #033F99;

    --page-footer-number : rgba(33, 37, 41, 0.75);
    --eyes-inactive-color: #6c757d;
    --detail-data-text-color:#666;
    --detail-data-value-color: #333;

    --public-year-button-hover:#e9ecef;
    --public-year-button-active:#dee2e6;

    --dropdown-year-border-color: #e1e5e9;
    --search-year-wrapper-color:#f8f9fa;
    --search-year-input-border-color:#ced4da;
    --search-year-input-bg-color:#F7F7F7;
    --year-option-hover-color:#eaf2f8;
    --char-select-search-bg:#ffffff;
    --char-select-search-border-color:rgba(0, 0, 0, 0.1);
    --char-select-search-border:0 2px 4px var(--char-select-search-border-color);
    --char-next-bg:  #ffffff;
    --char-next-bg-hover:#e9ecef;
    --char-button-bg-color: #ffffff;
    --char-button-border-color: #e1e5e9;
    --char-scrollbar-thumb-color: var(--scroll-color-main-public);
    --char-scrollbar-track-color: var(--scroll-color-main-background);
    --text-custtom-color: #888888;

    --public-pending-text: #FFD0B4;

    --switch-timeline-dot: var(--theme-color-second);
    --switch-timeline-dot-hover: #A8C1E6;

    --text-lastest-verstion-color : #007EF2;

}


/* <---------- Theme Light ----------> */
html[data-theme-public=light] {

}
/* <---------- End Theme Light ----------> */

[data-theme-public="dark"] {
    --body-color: #242424;
    --card-color: #3a3a3a;
    --header-color: #242424;
    --header-shadow:#2f2f2f;
    --input-background-color: #636363;
    --public-border: 1px solid var(--card-color);
    --body-font-color: #dadada;

    --scroll-color-background:#f5f5f5;
    --border-box-color: var(--card-color);

    /* Toggle colors - Dark Mode */
    --toggle-bg: #636363;
    --toggle-thumb: #ffffff;
    --toggle-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --toggle-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    --sun-color: #6b7280;
    --moon-color: #fbbf24;
    --tag-bg-color : #033F99btn;
    --pubilc-button-bg: #636363;

    --font-color-detail : #fff;
    --checkbox-color: #fff;

    --btn-light: var(--body-color);
    --btn-text-light: #fff;
    --btn-border-light: #fff;

    --btn-dark:#2075F6;
    --btn-boder-dark:#2075F6;

    --link-login-text-color:var(--body-font-color);
    --input-background-color-disabled:#3e3e3e;
    --arrow-sort-table: var(--body-font-color);
    --public-page-font-color-disabled:#3a3a3a;
    --public-page-font-color: var(--body-font-color);
    --public-page-footer-hover:rgb(0 0 0 / 26%);

    --filter-arraow-hover-color: var(--theme-color-default);
    --input-text-color-disabled-hover: #495057;

    --banner-arraow-color: var(--body-font-color);
    --banner-title-color: var(--body-font-color);

    --footer-bg-line-color : #979797;

    --scroll-color-drak-blue : #fff;
    --scroll-color-main-background: #d1d1d1;

    --tag-bg-colors : #2075F6;

    --switch-toggle-boder-dark : #495057;

    --switch-timeline-dot: #fff;

    --tag-bg-color-list : #545b63;
    --tag-text-color: #fff;
    --bg-table-focus: #122a46;
    --bd-table-hover: #1a3d67;


    --file-subtitle-color: var(--body-font-color);
    --file-subtitle-color-dot: var(--body-font-color);

    --page-footer-number : var(--body-font-color);
    --public-status-cancel-text : #fff;
    --public-status-cancel-bg: #fd5865;
    --public-status-used-text :#fff;
    --public-status-used-bg : #2075F6;
    --public-status-nolegal-text:#fff;
    --public-status-nolegal-bg:#ff8f00;
    --public-status-default-text:#ececec;
    --public-status-default-bg:#3D3D47;

    --eyes-inactive-color: var(--body-font-color);
    --detail-data-text-color: #bcbcbc;
    --detail-data-value-color: #bcbcbc;

    --public-year-button-hover:rgb(0 0 0 / 26%);
    --public-year-button-active:rgb(0 0 0 / 26%);

    --dropdown-year-border-color: #565555;
    --search-year-wrapper-color:#474747;
    --search-year-input-border-color:#242424;
    --search-year-input-bg-color:#242424;
    --year-option-hover-color:#f8f8f8;
    --char-select-search-bg:#363636;
    --char-select-search-border-color:#000;
    --char-select-search-border:0 1px 4px var(--char-select-search-border-color);
    --char-next-bg:  #363636;
    --char-next-bg-hover:#495057;
    --char-button-bg-color: #c5c5c5;
    --char-button-border-color: #495057;
    --char-scrollbar-thumb-color:#fff;
    --char-scrollbar-track-color: #363636;
    --text-custtom-color:var(--body-font-color);

    --public-pending-text: #FFE5BA;

    --switch-timeline-dot-hover: #495057;

    --text-lastest-verstion-color: #A9C7FF;
}
/* <---------- End Theme Dark ----------> */

/* <---------- content ----------> */
    body {
        overflow: hidden; /* เก็บไว้เพื่อไม่ให้ body scroll */
        height: 100vh; /* กำหนดความสูงเต็มหน้าจอ */
    }

    span, p, a, label{
        font-size: calc(var(--font-beeecm-size) * var(--font-scale)) !important;
    }

    /**** page header ****/
    .page-wrapper .page-header.public{
        background-color:var(--header-color);
        box-shadow: 0 4px 34px var(--header-shadow);
    }

    .page-header.public .page-main-header, .page-header.public .logo-wrapper{
        background-color:var(--header-color);
    }


    .page-header.public .logo-wrapper{
        /*margin-left:3rem;*/
        padding: 10px 16px;
    }

    .page-header.public .logo-wrapper img{
        width:130px
    }

    @media (max-width: 630px){
        .page-header.public .logo-wrapper{
            padding: 10px 7px;
        }

    }

    @media (max-width: 575.98px) {
        .page-header.public .page-main-header {
            padding: 15px 10px 15px 0px;
        }
    }

    .content-header-right{
        display:flex;
        align-items: center;
    }

    .link-login{
        margin-left: 14px;
    }

    .link-login a{
        text-decoration: underline !important;
        font-weight: 500;
        cursor: pointer;
        color: var(--link-login-text-color) !important;
        font-size: calc(16px * var(--font-scale)) !important;
    }

    .link-login a:hover{
        color: var(--theme-color-second) !important;
    }

    .link-login a img{
        --person-size: calc(24px * var(--font-scale));
        width: var(--person-size);
        height: var(--person-size);
        margin-right: 5px
    }


    @media (max-width: 992px){
        .link-login{
            display:none;
        }
    }

    @media (min-width: 992px){
        .link-login-sm{
            display:none !important;
        }
    }

    .link-login-sm img{
        width: 100%;
        height: 100%;
    }

    span.small{
        font-size: calc(16px * 0.8) !important;
    }

    span.medium{
        font-size: 16px !important;
    }

    span.large{
        font-size: calc(16px * 1.4) !important;
    }

    .page-header .page-main-header-wrapper{
        background-color: var(--card-color);
        display: flex;
        justify-content: space-between;
        padding: 15px 34px;
        /*align-items: center;*/
    }

    .page-header .logo-wrapper.public{
          width:auto;
    }
    .logo-wrapper.public .header-title{
        display:block;
        padding-left: 25px
    }
    .logo-wrapper.public .header-title p{
        font-size: 16px !important;
    }
    .page-header .page-main-header-wrapper .header-action{
        display: flex;
        align-items: center;
        justify-content: end;
    }

    @media (max-width: 767.98px){
        .logo-wrapper.public .header-title{
            display:none;
        }
    }

    /**** page ****/
    .public-wrapper-content{
        /*min-height: 100vh;*/
        width: 100vw;
        display: block;
        gap:10px;
        overflow-y: auto; /* เพิ่ม scroll bar แนวตั้ง */
        overflow-x: hidden; /* ซ่อน scroll bar แนวนอน */
    }


    .content-box{
        display: flex;
        flex-direction: column;
        gap: 10px;
        /*flex: 1 1 auto;*/
        min-width: 0;
        padding: 0 3rem;
    }

    @media (max-width: 1199.98px) {
        .content-box {
            padding: 0 1rem;
        }
    }
    @media (max-width: 575.98px) {
        .content-box {
            padding: 0 10px !important;
        }
    }


    .data-content{
        display:flex;
        gap:10px
    }

    .main-content {
        flex: 1;
        background-color: var(--body-color);

    }

    .main-content.detail-page {
        flex: 1;
        border: var(--public-border);
        background: var(--card-color) !important;
        transition: all .5s;
        flex-shrink: 0;
        padding: 15px;
        border-radius:8px;
        overflow-x: hidden;
        overflow-y: auto;
        position: sticky;
    }
    /**** footer ****/
    .footer.public{
        padding:0px;
    }

    .content-footer{
        padding:0px;
        background-color: var(--footer-bg-color);
    }

    .footer-contact{
        padding: 20px 3rem;
        margin-top: 5px;
    }

    .footer.public .footer-copyright{
        padding: 0 2rem;
    }

    .footer.public .footer-copyright h4{
        margin-bottom: 10px;
        color: #fff;
        font-size: calc(22px * var(--font-scale));

    }
    .footer-version{
        margin-bottom: 15px
    }
    .footer-version p{
        margin-bottom: 2px
    }

    .footer.public p {
        font-size: calc(var(--font-footer-size) * var(--font-scale));
        color: #fff;
    }
    .footer.public .footer-icon {
        width: 170px;
        /*height: fit-content;*/
    }

    @media (max-width: 767.98px) {
        .footer.public .row p {
            text-align: start;
        }
        .footer.public .row p.float-end {
            float: unset !important;
        }
    }

    @media (min-width: 992px) and (max-width: 1200px){
        .footer.public .footer-icon {
            width: 150px;
        }
    }


    .footer-bottom{
        background-color: var(--footer-bg-line-color);
        min-height : 30px;
        width:100%
    }

    @media screen and (max-width: 768px) {
        .footer.public .footer-copyright h4{
            font-size: calc(18px * var(--font-scale));
        }

        .footer.public p {
            font-size: calc(13px * var(--font-scale)) !important;
        }

        .footer-contact{
            padding-left: 2rem;
            padding-right: 2rem;
        }

    }

    /**** content-title ****/
    .content-title {
        width: 100%;
        min-height: 15vh;
        border: var(--public-border);
        background: var(--card-color);
        transition: all .5s;
        flex-shrink: 0;
        padding: 15px;
        border-radius:8px;
        overflow-x: hidden;
        overflow-y: auto;
        position: sticky;

    }

    .label-title {
        font-weight: bold;
        color: var(--font-color-detail);
        font-size: calc(15px * var(--font-scale));
    }

    .label-title-blue {
        color:  var(--scroll-color-drak-blue);
        font-size: calc(15px * var(--font-scale));
    }

    /**** sidebar filter ****/
    .public-sidebar {
        width: 330px;
        border: var(--public-border);
        background: var(--card-color);
        transition: all .5s;
        flex-shrink: 0;
        padding: 15px;
        border-radius:8px;
        overflow-x: hidden;
        overflow-y: auto;
        position: sticky;

    }

    @media (max-width: 1200px) {
        .public-sidebar{
            --margin-space:78px;
            width:300px;
            height: calc(100vh - var(--margin-space)) !important;
            max-height: calc(100vh - var(--margin-space)) !important;
            position: fixed;
            top: 0 !important;
            left: 0;
            border:none;
            box-shadow: 0 36px 35px rgba(0, 0, 0, .1);
            z-index: 10;
            margin-top: 78px;
            transition: all .5s;
            border-radius:0;

        }
    }

    @media (max-width: 767.98px) and (min-width: 481px) {
        .public-sidebar {
            width: 260px;
            --margin-space: 70px;
            margin-top: var(--margin-space);
            height: calc(100vh - var(--margin-space)) !important;
            max-height: calc(100vh - var(--margin-space)) !important;
        }
    }

    @media (max-width: 480px) {
        .public-sidebar {
            --margin-space:64px;
            margin-top: var(--margin-space);
            height: calc(100vh - var(--margin-space)) !important;
            max-height: calc(100vh - var(--margin-space)) !important;
        }
    }


    .content-menu-filter {
        padding-bottom: 50px;
        max-height: 800px;
    }

    @media (max-width: 767.98px) {
        .content-menu-filter{
            padding-bottom:50px
        }
    }
    .page-wrapper.sidebar-close {
        margin-left: 0;
        transition: 0.5s all;
    }
    .page-wrapper.sidebar-close .public-sidebar {
        display:none;
    }


    /**** button header/  medium box ****/
    .medium-custom-btn{
        width: 40px !important;
        height: 40px !important;
        border-radius: 5px;
        padding: 0;
        margin-left: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

    }

    .medium-small-custom-btn{
        width: 35px !important;
        height: 35px !important;
        border-radius: 5px;
        padding: 0;
        margin-left: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

    }

    @media (max-width: 630px) {
        .medium-small-custom-btn{
            width: 30px !important;
            height: 30px !important;
            margin-left: 8px;
        }


    }

    .custom-btn-light{
        background-color: var(--btn-light) !important;
        color: var(--btn-text-light) !important;
        border:2px solid var(--btn-border-light);
    }

    .custom-btn-home{
        background-color: var(--btn-light) !important;
        color: var(--btn-text-light) !important;
        border:2px solid var(--btn-border-light);
    }

    .custom-btn-light:focus,
    .custom-btn-light.active {
        background-color: var(--btn-dark) !important;
        color: var(--btn-text-dark) !important;
        border:2px solid var(--btn-boder-dark);
    }


    .custom-btn-dark{
        background-color: var(--btn-dark);
        color: var(--btn-text-dark);
    }

    .custom-btn-dark:focus ,
    .custom-btn-dark.active{
        background-color: var(--btn-light) !important;
        color: var(--btn-text-light) !important;

    }

    .custom-btn-light:hover,
    .custom-btn-dark:hover{
        background-color: var(--theme-color-second) !important;
        color: #FFFFFF !important;
        border:none
    }





    /**** button  ****/


    /**** sidebar detail    ****/
    .sidebar-detail{
        display:none;
        width: 350px;
        max-width: 90%;
        background-color:var(--card-color);
        flex-shrink: 0;
        padding: 20px;
        border-radius:8px;
        overflow-x: hidden;
        overflow-y: auto;
        /*min-height: 100vh;*/
        position: sticky;
        border: var(--public-border);
    }

    .sidebar-detail.show{
        display:block;
    }


    /* Tablet and mobile styles */
    @media screen and (max-width: 1024px) {
        .sidebar-detail {
            position: fixed;
            top: 80px !important;
            right: 0;
            width: 380px;
            max-width: 95vw;
            margin-top: 0;
            z-index: 1000;
            box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
            --height-detail: calc(100vh - 80px);
            height: var(--height-detail) !important;
            max-height: var(--height-detail) !important;
            min-height: 0px;
        }
    }

    /* Styles for smaller mobile devices */
    @media screen and (max-width: 768px) {
        .sidebar-detail {
            top: 50% !important;
            left: 50%;
            right: auto;
            bottom: auto;
            width: 80%;
            max-width: 80%;
            transform: translate(-50%, -150%);
        }

        .sidebar-detail.show {
            transform: translate(-50%, -50%);
        }

    }

    @media (max-width: 480px) {
        .sidebar-detail {
            width:90%;
            max-width:90%;
        }
    }

    /* Overlay backdrop - ใช้ element แยก */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
        backdrop-filter: blur(2px);
    }

    .sidebar-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* ซ่อน overlay ใน desktop */
    @media screen and (min-width: 769px) {
        .sidebar-overlay {
            display: none;
        }
    }


    /**** tree view    ****/
    .tree-icon-container .form-check-input{
        margin: 0px;
        margin-right: 3px;
    }

    .filter-tree{
        width: var(--filter-tree-content-width);
        overflow-x: auto;
        border-bottom: var(--light-border);
        padding-bottom: 10px;
        padding-top: 10px;
    }
    .filter-tree:last-child{
        border:none
    }

    .filter-tree .tree-container{
        /*max-height: 420px;*/
        height: auto;
    }
    .filter-tree .tree-container ul li{
        padding: 0 !important;
    }

    .filter-tree .tree-container .tree-item {
        min-width: 100%;
        width: max-content;
        gap: 5px;
        /*align-items: center !important;*/
    }

    .filter-tree .tree-container .tree-item.all {
        align-items:center
    }
    .filter-tree .tree-container .tree-item.all:hover {
        background-color:none;
    }

    .filter-tree  .tree-item-text {
        user-select: none;
        flex: 1;
        color: var(--body-font-color);

        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        max-width: 400px;
    }

    .filter-tree .tree-item.selected ,.filter-tree .tree-item:hover.selected {
        background-color: #2075f612;
        border: none;
    }
    .filter-tree .tree-item:hover {
        background-color: #f8f8f8;
    }


    .filter-tree .tree-item:hover .tree-icon-container .check-content svg,
    .filter-tree .tree-item:hover .tree-chevron{
        color: var(--theme-color-default);
    }
    .filter-tree .tree-item:hover .tree-item-text ,
    .filter-tree .tree-item.selected .tree-item-text{
        color: var(--theme-color-second);
    }

    .filter-tree .tree-container .tree-item  .tree-content-text label{
        margin-bottom:0px;
        color: var(--body-font-color);
    }

    .filter-tree .tree-container .tree-item  .tree-content-text{
        align-items: baseline;

    }

    .filter-tree  .tree-chevron{
        color: var(--body-font-color);
        padding-left: 8px;
        padding-right: 10px;
        display:flex;
    }

    .filter-tree .tree-arrow {
        font-size: 15px;
    }

    .filter-tree .tree-item:hover .tree-content-text label {
        color: var(--theme-color-second);
    }

    .tree-icon-container .check-content{
        display:flex;
    }
    .tree-icon-container .check-content svg{
        font-size : 17px;
        color: var(--theme-color-default);
    }

    /*   Sidebar Detail */
    .sidebar-detail-wrapper .sidebar-head .close{
        display:flex;
        justify-content:end
    }


    /*  Scroll Bar  */
    .public-wrapper-content {
        --scrollbar-width: 7px;
        --scrollbar-track-color: var(--scroll-color-main-background);
        --scrollbar-thumb-color: var(--scroll-color-main-public);
        --scrollbar-border-radius: 4px;
    }

    .public-wrapper-content,
    .public-wrapper-content * {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
        /*scrollbar-color: #cbd5e0 #f7fafc;*/
    }
    .thai-chars-container{
        scrollbar-color: var(--char-scrollbar-thumb-color) var(--char-scrollbar-track-color);
    }

    .public-wrapper-content::-webkit-scrollbar,
    .public-wrapper-content *::-webkit-scrollbar {
        width: var(--scrollbar-width);
        height: var(--scrollbar-width);
    }

    .public-wrapper-content::-webkit-scrollbar-track,
    .public-wrapper-content *::-webkit-scrollbar-track {
        background: var(--scrollbar-track-color);
        border-radius: var(--scrollbar-border-radius);
    }

    .public-wrapper-content::-webkit-scrollbar-thumb,
    .public-wrapper-content *::-webkit-scrollbar-thumb {
        background: var(--scrollbar-thumb-color);
        border-radius: var(--scrollbar-border-radius);
        transition: background 0.3s ease;
    }

/* <---------- End content ----------> */



/* <---------- Search, File and Detail ----------> */
.form-group {
    margin-bottom: 1rem;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
}

.bold-text {
    font-weight: bold;
}

.search-input-wrapper input {
    width: 100%;
    padding: 8px 40px 8px 12px;
    border: 2px solid #ced4da;
    border-radius: 8px;
    border-right: none;
    font-size: calc(15px * var(--font-scale));
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


.search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    font-size: calc(14px * var(--font-scale));
}


/* ช่องตัวอักษร */
.modern-input-group-wrapper{
    width: 100%;
    background-color:var(--body-color);
    padding:5px 5px 5px 5px;

}
.modern-input-group {
    display: flex;
    background: var(--input-background-color);
    border: var(--public-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.modern-input-group:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.modern-input-group input {
    flex: 1;
    padding: 12px 16px;
    border: none;
    outline: none;
    font-size: calc(15px * var(--font-scale));
    background: transparent;
}

.small-button-wicon-public {
    justify-content: center;
    align-items: center;
    width: 37px;
    height: 37px;
    border-radius: 5px;
    background-color: var(--pubilc-button-bg);
    border: 1px solid var(--pubilc-button-bg);
}
.small-button-wicon-public:hover {
    background-color: var(--public-btn-grey-color);
    border-color: #ccc;
    color:  var(--theme-color-default);
}

.btn-blue-public {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    height: 37px;
    background-color: var(--pubilc-button-bg);
    border: 1px solid var(--pubilc-button-bg);
    font-size: 13px;
    color:  var(--font-color-detail);
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
}

.btn-blue-public:hover {
    background-color: var(--public-btn-grey-color) !important;
    border-color: #ccc;
    color:  var(--theme-color-default) !important;
    text-decoration: none;
    font-weight: bold;
}

.title-table{
    background-color:var(--body-color);
}
.chars-year-wrapper {
    background: var(--card-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    border: var(--public-border);
}

.del-search{
    width: 20px;
    color: var(--body-font-color);
}

.chars-year-container {
    display: flex;
    background: var(--char-select-search-bg);
    border: var(--public-border);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.3s ease;
    align-items: center;
    position: relative;
    box-shadow: var(--char-select-search-border);
    width: calc(100% - var(--toggle-swith-width));
}

.chars-year-container:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

.scroll-btn {
    background: var(--card-color);
    border: none;
    width: 40px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6c757d;
    flex-shrink: 0;
    font-size: calc(15px * var(--font-scale));
}

.scroll-btn:hover{
    background: var(--public-year-button-hover);
    color: #495057;
}


.scroll-btn.char:hover .custom-icon-color{
    color: var(--theme-color-second) !important;
}

.scroll-btn:active {
    background: var(--public-year-button-active);
}

.scroll-btn-left {
    border-right: 2px solid #e1e5e9;
    border-right: none;
}

.scroll-btn-right {
    border-left: 2px solid #e1e5e9;
    border-left: none;
}


.custom-icon-color {
    color: var(--arrow-sort-table) !important;
}

.text-custom {
    color: var(--text-custtom-color);
}

.thai-chars-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex: 1;
    background: var(--char-select-search-bg);
    scroll-behavior: smooth;
    padding: 8px;
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.thai-chars-container::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

.thai-chars-container:hover {
    scrollbar-width: thin; /* Firefox - บางสุด */
    -ms-overflow-style: auto; /* Internet Explorer 10+ */
}

/* แสดง scrollbar ใน Webkit browsers เมื่อ hover - เล็กลง */
.thai-chars-container:hover::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

.thai-chars-container:hover::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.02);
    border-radius: 2px;
}

.thai-chars-container:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.08);
    border-radius: 2px;
    transition: background 0.2s ease;
}

.thai-chars-container:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.12);
}

.thai-char-btn {
    min-width: 40px;
    width: 35px;
    height: 35px;
    border: 1px solid var(--char-button-border-color);
    background-color: var(--char-button-bg-color);
    color: #495057;
    font-size: calc(15px * var(--font-scale));
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.thai-char-btn:last-child {
    margin-right: 0;
}

.thai-char-btn:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.thai-char-btn.active {
    background-color: #007bff;
    border-color: #007bff;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.thai-char-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

.disabled-input {
    background-color: #f8f9fa !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

.disabled-container {
    opacity: 0.5;
    pointer-events: none;
}

.thai-char-btn.disabled {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

.scroll-btn.disabled-btn {
    background-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

.disabled-icon {
    color: #6c757d !important;
    cursor: not-allowed !important;
}

.multi-select-wrapper {
    position: relative;
    flex-shrink: 0;
    background: var(--input-background-color);
    border: var(--public-border);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--border-box-color);
}

.selected-years-tags {
    padding: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 1px solid #e1e5e9;
    background: #f8f9fa;
}

.year-tag {
    display: inline-flex;
    align-items: center;
    background: #007bff;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: calc(12px * var(--font-scale));
    font-weight: 500;
}

.remove-year-btn {
    background: none;
    border: none;
    color: white;
    margin-left: 4px;
    cursor: pointer;
    font-size: calc(10px * var(--font-scale));
    padding: 0;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.remove-year-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dropdown-header {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(15px * var(--font-scale));
    background: var(--input-background-color) !important;
    transition: background 0.2s ease;
    /*min-height: 60px;*/
    border-radius: 8px;
}

.file-card {
    padding: 16px;
    background-color: var(--card-color);
    font-size: calc(15px * var(--font-scale));
    min-height: 120px;
    border-top: 1px dashed #e1e5e9;
}

.file-card.active {
    background-color: var(--bg-table-focus) !important;
}

.file-card:hover {
    background-color: var(--bd-table-hover);
}

.eye-icon-active {
    color: #005bfb !important;
    font-size: calc(15px * var(--font-scale));
}

.eye-icon-inactive {
    color: var(--eyes-inactive-color);
    font-size: calc(15px * var(--font-scale));
}

.button-confirm {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: calc(15px * var(--font-scale));
    transition: background 0.2s ease;
    min-width: 100%;
    min-height: 50px;
    border-radius: 8px;
}

.dropdown-header:hover {
    background: #f8f9fa;
}

.dropdown-arrow {
    font-size: calc(15px * var(--font-scale));
    transition: transform 0.2s ease;
}

/* Dropdown Body */
.dropdown-body {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-color);
    border: 2px solid var(--dropdown-year-border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    max-height: 300px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.search-year-wrapper {
    padding: 8px;
    border-bottom: 1px solid #e1e5e9;
    background: var(--search-year-wrapper-color);
}

.search-year-input {
    width: 100% !important;
    padding: 8px 12px !important;
    border: 1px solid var(--search-year-input-border-color) !important;
    border-radius: 4px !important;
    font-size: calc(14px * var(--font-scale)) !important;
    outline: none !important;
    background-color: var(--search-year-input-bg-color) !important;
}

.search-year-input:focus {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

.years-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 4px 0;
}

.year-option {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    margin: 0;
    cursor: pointer;
    transition: background 0.2s ease;
    font-size: calc(15px * var(--font-scale));
}

.year-option:hover {
    background: var(--year-option-hover-color);
    color: var(--theme-color-second);
}

.year-checkbox {
    margin-right: 8px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    width: 16px;
    height: 16px;
    accent-color: #007bff;
}

.year-label {
    user-select: none;
    flex: 1;
}

#search_content {
    background: var(--body-color);
    padding-top: 20px;
    padding-bottom: 5px;
    position: sticky;
    top: 0px;
    z-index: 1;
}

.selected-years-horizontal-wrapper {
    overflow: hidden;
}

.selected-years-horizontal {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 8px;
    max-width: 100%;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #cbd5e0 transparent; /* Firefox */
}

/* Webkit browsers (Chrome, Safari, Edge) */
.selected-years-horizontal::-webkit-scrollbar {
    height: 4px;
}

.selected-years-horizontal::-webkit-scrollbar-track {
    background: transparent;
}

.selected-years-horizontal::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 2px;
}

.selected-years-horizontal::-webkit-scrollbar-thumb:hover {
    background: #a0aec0;
}

.selected-year-tag {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    /*background-color: #003da5;*/
    color: white;
    padding: 4px 8px;
    border-radius: 16px;
    font-size: calc(8px * var(--font-scale));
    font-weight: 300;
    white-space: nowrap;
    flex-shrink: 0; /* ป้องกันการหดตัว */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
}

.selected-year-tag:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.remove-year-btn-inline {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.remove-year-btn-inline:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.remove-year-btn-inline svg {
    width: 8px;
    height: 8px;
}

/* ปรับปุ่ม scroll */
.scroll-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.scroll-btn:disabled:hover {
    background-color: transparent;
}

.form-group + .form-group {
    margin-top: 15px;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.tag {
    display: inline-block;
    padding: 3px 5px;
    font-size: calc(13px * var(--font-scale));
    border-radius: 0;
    /*border: 1px dashed #e1e5e9;*/
    transition: all 0.2s ease-in-out;

    background-color: var(--tag-bg-color-list);
    color: var(--tag-text-color);
}


.content {
    display: inline-block;
    padding: 3px 5px;
    font-size: calc(13px * var(--font-scale));
    border-radius: 0;
    border: 1px dashed #e1e5e9;
    transition: all 0.2s ease-in-out;
    margin-top: 10px;
    background-color: var(--tag-body-color);
    color: var(--tag-black-color);
}

.content-highlight-yellow {
    color: var(--tag-text-color);
}

.file-card.active .content{
    border: 1px dashed #b1bbc0;
}
.data-row {
    display: flex;
    margin-bottom: 12px;
}

.data-label {
    min-width: 130px;
    color: var(--detail-data-text-color);
}

.data-value {
    color: var(--detail-data-value-color);
}

.show-detail-title {
    text-decoration: underline;
    font-weight: bold;
    font-size: calc(15px * var(--font-scale));
    margin-bottom: 10px;
}
.show-detail-header{
    border-top: var(--light-border);
    position: relative;
    min-height: 7rem;
    max-height: 10rem;
    word-break: break-word;
    display: flex;
    overflow-y: auto;

}

.show-detail-footer{
    border-top: var(--light-border);
    position: relative;
    word-break: break-word;
    display: flex;
    overflow-y: auto;

}
.show-detail-content{
    border-top: var(--light-border);
}
.show-detail-header img{
    width: 70px;
    height: 70px;
}
/* Responsive Design */
@media (max-width: 992px) {
    .multi-select-wrapper {
        width: 100%;
    }

    .thai-char-btn {
        min-width: 35px;
        width: 32px;
        height: 32px;
        font-size: calc(15px * var(--font-scale));
    }

    .year-option {
        display: flex;
        align-items: center;
        padding: 8px 16px;
        margin: 0;
        cursor: pointer;
        transition: background 0.2s ease;
        font-size: calc(15px * var(--font-scale));
    }

    .button-confirm {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(15px * var(--font-scale));
        transition: background 0.2s ease;
        border-radius: 8px;
        width: 100%;
    }

    .dropdown-header {
        font-size: calc(14px * var(--font-scale));
        /*min-height: 58px;*/
    }
}

@media (max-width: 768px) {
    .chars-year-wrapper {
        padding: 8px;
        border-radius: 6px;
    }

    .scroll-btn {
        width: 35px;
        height: 45px;
    }

    .thai-chars-container {
        padding: 8px 8px;
    }

    .thai-char-btn {
        min-width: 32px;
        width: 32px;
        height: 32px;
        font-size: calc(14px * var(--font-scale));
        margin-right: 3px;
    }

    .multi-select-wrapper {
        width: 100%;
        min-width: 100%;
        margin-top: 8px;
    }

    .dropdown-body {
        position: relative;
        border: 2px solid #e1e5e9;
        border-radius: 8px;
        margin-top: 8px;
    }

    .selected-years-horizontal {
        max-width: 100%;
    }

    .selected-year-tag {
        font-size: calc(8px * var(--font-scale));
        padding: 3px 6px;
    }

    .button-confirm {
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: calc(14px * var(--font-scale));
        transition: background 0.2s ease;
        border-radius: 8px;
        margin-top: 8px;
        min-width: 100%;
    }

    .dropdown-header {
        /*padding: 15px 16px;*/
        font-size: calc(14px * var(--font-scale));
        /*min-height: 58px;*/
    }
}

@media (max-width: 576px) {
    .chars-year-wrapper {
        padding: 6px;
        border-radius: 4px;
        margin-bottom: 6px;
    }

    .modern-input-group {
        border: 2px solid #e1e5e9;
        border-radius: 8px;
    }

    .chars-year-container {
        border-radius: 8px;
    }

    .scroll-btn {
        display: none;
    }

    .thai-chars-container {
        width: 100%;
        justify-content: flex-start;
        padding: 12px;
        gap: 6px;
    }

    .thai-char-btn {
        min-width: 30px;
        width: 30px;
        height: 30px;
        font-size: calc(13px * var(--font-scale));
        margin-right: 0;
        border-radius: 3px;
    }

    .multi-select-wrapper {
        width: 100%;
        min-width: 100%;
        margin-top: 10px;
    }

    .selected-years-tags {
        padding: 6px;
    }

    .year-tag {
        font-size: calc(11px * var(--font-scale));
        padding: 3px 6px;
    }

    .dropdown-header {
        /*padding: 15px 16px;*/
        font-size: calc(15px * var(--font-scale));
        /*min-height: 60px;*/
    }

    .dropdown-arrow {
        font-size: calc(15px * var(--font-scale));
    }

}


@media (max-width: 375px) {
    .chars-year-wrapper {
        padding: 4px;
        margin-bottom: 4px;
    }

    .thai-char-btn {
        min-width: 28px;
        width: 28px;
        height: 28px;
        font-size: calc(15px * var(--font-scale));
    }

    .thai-chars-container {
        gap: 4px;
        padding: 10px;
    }

    .multi-select-wrapper {
        margin-top: 15px;
    }

}

/* Scrollbar for years list */
.years-list::-webkit-scrollbar {
    width: 6px;
}

.years-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.years-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.years-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
/* <---------- End Search, File and Detail ----------> */


/* <---------- Toggle search ----------> */
.toggle-switch {
    position: relative;
    width: var(--toggle-swith-width);
    height: var(--toggle-swith-height);
    background: var(--switch-toggle-dark);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid var(--switch-toggle-boder-search);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;
}


.toggle-switch.active {
    background: var(--switch-toggle-dark);
    border-color: var(--switch-toggle-boder-search);
}

.toggle-labels {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    box-sizing: border-box;
    pointer-events: none;
    right: 5px;
    left: 5px;
}

.toggle-knob {
    position: absolute;
    width: var(--toggle-swith-height);
    height: calc(var(--toggle-swith-height) - 6px);
    background: var(--switch-toggle-knob-dark);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* สลับตำแหน่ง knob เมื่อ active */
.toggle-switch.active .toggle-knob {
    left: calc(var(--toggle-swith-width) - var(--toggle-swith-height) - 6px);
}

@media (max-width: 576px){
    .toggle-switch.active .toggle-knob {
        left: calc(var(--toggle-swith-width) - var(--toggle-swith-height) - 9px);
    }
}
.toggle-icon {
    width: 15px;
    height: 15px;
    transition: all 0.3s ease;
}

.toggle-knob span , .toggle-knob svg{
    font-size: 13px;
    font-weight: bold;
    color: var(--toggle-knob-svg-color);
}

.toggle-labels span, .toggle-labels svg{
    opacity: 0.4;
    color: var(--switch-toggle--text-dark);
    font-size: 14px;
}

/* Hover Effects */
.toggle-switch:hover {
    transform: scale(1.02);
}


.modern-input-group.title{
    width: calc(100% - var(--toggle-swith-width));
}

/* Paging Data Table */
@media (max-width: 576px) {
    .public-wrapper-content .cPTFZC{
        font-size : 13px;
    }
    .public-wrapper-content .cPTFZC svg{
        width:20px;
        height: 20px;
    }
    .public-wrapper-content .page-body .text-page-total{
        font-size: 12px !important;
    }
}
/* <---------- End Toggle search  ----------> */


.download-buttons {
    position: absolute;
    top: 20px;
    right: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 100;
}

/* Base button style - สไตล์ปุ่มพื้นฐาน */
.download-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s, box-shadow 0.2s;
}

/* Hover effects - เอฟเฟกต์เมื่อเลื่อนเมาส์มา */
.download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.download-btn:active {
    transform: translateY(0);
}

/* PDF button (red) - ปุ่ม PDF สีแดง */
.download-btn.pdf {
    background-color: #FFFFFF;
}

.download-btn.pdf:hover {
    background-color: var(--public-btn-grey-color);
}

/* DOC button (blue) - ปุ่ม DOC สีน้ำเงิน */
.download-btn.doc {
    background-color: #FFFFFF;
}

.download-btn.doc:hover {
    background-color: var(--public-btn-grey-color);
}

/* XLS button (green) - ปุ่ม XLS สีเขียว */
.download-btn.xls {
    background-color: #FFFFFF;
}

.download-btn.xls:hover {
    background-color: var(--public-btn-grey-color);
}

/* เฉพาะมือถือและ tablet <= 1024px */
@media (max-width: 1024px) {
    .download-buttons {
        position: static !important;
        display: flex;
        justify-content: flex-end;
        margin-top: 5px;
        margin-right: 5px;
    }
}

@media (max-width: 576px) {
    .download-btn {
        width: 35px;
        height: 35px;
    }

    .download-btn img{
        width: 22px !important;
    }
}

/*Banner Public Page*/
.banner-container {
    background-color: var(--card-color);
    border: var(--public-border);
    width: 100%; /* เต็มความยาว */
    margin-bottom: 10px;
    padding: 15px 20px;
    border: 1px solid var(--border-box-color);
    border-radius: 8px;
    box-shadow: 0 2px 4px var(--border-box-color);
}

.banner-header {
    display: flex;
    align-items: center;
    padding-bottom: 5px;
    gap: 10px;
}

.globeIcon {
    width: 30px;
    height: 30px;
}

.banner-title {
    color: var(--banner-title-color);
    font-size: calc(15px * var(--font-scale));
    font-weight: 600;
    margin: 0;
}

.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

.loading {
    font-size: 16px;
    color: var(--public-toggle-mode);
}

.carousel {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.banner-navButton,.banner-navButton:focus:not(:disabled),.banner-navButton:focus-visible:not(:disabled) {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    color: var(--banner-arraow-color);
    transition: all 0.3s ease;
    flex-shrink: 0;
    background-color: transparent;
    border: none;
}

.banner-navButton:hover:not(:disabled) {
    color: var(--theme-color-second);
    transform: scale(1.05);
}

.banner-navButton:active:not(:disabled) {
    transform: scale(0.95);
}

.banner-navButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* CSS Grid สำหรับ responsive layout */
.organizations-grid {
    display: grid;
    gap: 20px;
    flex: 1;
    width: 100%;
    align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); /* เพิ่มขนาด min-width */
    transition: transform 0.5s ease-in-out;
}

.organization-card,.organization-card:focus  {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px; /* ลด padding เพื่อให้พื้นที่กับรูป */
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    height: 130px; /* กำหนดความสูงเป็น 130px */
    justify-content: flex-start; /* logo อยู่บนสุดเสมอ */
    outline: none;
}

.organization-card:hover {
    transform: translateY(-2px);
}

.logoContainer {
    position: relative;
    width: 95px; /* เพิ่มจาก 85px เป็น 95px */
    height: 95px; /* เพิ่มจาก 85px เป็น 95px */
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orgLogo {
    width: 75px; /* เพิ่มจาก 68px เป็น 75px */
    height: 75px; /* เพิ่มจาก 68px เป็น 75px */
    object-fit: contain;
    transition: transform 0.3s ease;
}

.organization-card:hover .orgLogo {
    transform: scale(1.05); /* เพิ่ม hover effect */
}

.orgName {
    font-size: calc(13px * var(--font-scale));
    font-weight: 600;
    color: var(--body-font-color);
    line-height: 1.2; /* ลด line-height */
    margin: 0;
    font-family: 'Sarabun', sans-serif;
    width: 100%;
    height: 35px; /* ลดความสูงข้อความ */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.indicator {
    width: 18px;
    height: 5px;
    border: none;
    background-color:var(--banner-indicator-dot);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.indicator.active {
    background-color: var(--theme-color-second);
    transform: scale(1.2);
}

.indicator:hover {
    background-color: var(--banner-indicator-dot-hover);
}

/* Responsive Design - Updated Breakpoints */
@media (min-width: 1200px) {
    .organizations-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .organizations-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .banner-container {
        padding: 18px;
    }

    .banner-title {
        font-size: calc(14px * var(--font-scale));
    }

    .organizations-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    }

    .organization-card {
        height: 130px; /* ใช้ความสูงเดียวกัน */
        padding: 8px;
    }

    .logoContainer {
        width: 82px; /* เพิ่มขนาดสำหรับ tablet */
        height: 82px;
        margin-bottom: 5px;
    }

    .orgLogo {
        width: 68px; /* เพิ่มขนาดสำหรับ tablet */
        height: 68px;
    }

    /*.logoPlaceholder {*/
    /*    width: 50px;*/
    /*    height: 50px;*/
    /*    font-size: 25px;*/
    /*}*/

    .orgName {
        font-size: calc(12px * var(--font-scale));
        height: 37px;
    }

    .banner-navButton {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .banner-container {
        padding: 16px;
    }

    .banner-title {
        font-size: calc(13px * var(--font-scale));
    }

    .organizations-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .organization-card {
        height: 130px; /* ใช้ความสูงเดียวกัน */
        padding: 6px;
    }

    .logoContainer {
        width: 72px; /* เพิ่มขนาดสำหรับ mobile large */
        height: 72px;
        margin-bottom: 4px;
    }

    .orgLogo {
        width: 58px; /* เพิ่มขนาดสำหรับ mobile large */
        height: 58px;
    }

    /*.logoPlaceholder {*/
    /*    width: 45px;*/
    /*    height: 45px;*/
    /*    font-size: 22px;*/
    /*}*/

    .orgName {
        font-size: calc(11px * var(--font-scale));
        height: 35px;
    }

    .banner-navButton {
        width: 35px;
        height: 35px;
        font-size: 20px;
    }
}

@media (max-width: 575px) {
    .banner-container {
        padding: 14px;
    }

    .banner-title {
        font-size: calc(12px * var(--font-scale));
    }

    .globeIcon {
        width: 25px;
        height: 25px;
    }

    .carousel {
        gap: 12px;
    }

    .organizations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }

    .organization-card {
        height: 130px; /* ใช้ความสูงเดียวกัน */
        padding: 5px;
    }

    .logoContainer {
        width: 64px; /* เพิ่มขนาดสำหรับ mobile */
        height: 64px;
        margin-bottom: 3px;
    }

    .orgLogo {
        width: 52px; /* เพิ่มขนาดสำหรับ mobile */
        height: 52px;
    }

    /*.logoPlaceholder {*/
    /*    width: 40px;*/
    /*    height: 40px;*/
    /*    font-size: 20px;*/
    /*}*/

    .orgName {
        font-size: calc(10px * var(--font-scale));
        height: 32px;
        line-height: 1.1;
    }

    .banner-navButton {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .indicator {
        width: 15px;
        height: 6px;
    }
}

/* Extra small devices */
@media (max-width: 320px) {
    .banner-container {
        padding: 12px;
    }

    .organizations-grid {
        gap: 8px;
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }

    .organization-card {
        height: 130px; /* ใช้ความสูงเดียวกัน */
        padding: 4px;
    }

    .logoContainer {
        width: 58px;
        height: 58px;
        margin-bottom: 2px;
    }

    .orgLogo {
        width: 48px; /* เพิ่มขนาดสำหรับ extra small */
        height: 48px;
    }

    /*.logoPlaceholder {*/
    /*    width: 35px;*/
    /*    height: 35px;*/
    /*    font-size: 18px;*/
    /*}*/

    .orgName {
        font-size: calc(9px * var(--font-scale));
        height: 30px;
    }
}

/* SidebarTimeline.css */

.timeline-container {
    position: relative;
    padding-bottom: 3rem;
}

/* Vertical line */
.timeline-line {
    position: absolute;
    left: 15px;
    top: 0;
    bottom: 0;
    width: 5px;
    background-color: var(--switch-toggle-boder-dark);
    transition: all 0.3s ease;
}

.timeline-line.active {
    background-color: var(--switch-timeline-dot-hover);
    width: 5px;
    margin-bottom: 3rem;
}

/* Timeline item wrapper */
.timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    margin-bottom: 32px;
    padding-left: 40px;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    transition: all 0.3s ease;
}

/*.timeline-item:last-child {*/
/*    margin-bottom: 0;*/
/*}*/


/* Timeline dot */
.timeline-dot {
    position: absolute;
    left: 10px;
    width: 15px;
    height: 15px;
    background-color: var(--switch-toggle-boder-dark);
    border-radius: 50%;
    border: 2px solid var(--switch-toggle-boder-dark);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-item.active .timeline-dot {
    background-color: var(--switch-timeline-dot);
    border-color: var(--switch-timeline-dot);
    transform: scale(1.8);
}

/* Timeline content wrapper */
.timeline-contents {
    flex: 1;
}

.timeline-title {
    font-size: calc(13px * var(--font-scale)) !important;
    font-weight: 500 !important;
    color: var(--scroll-color-drak-blue);
    margin-bottom: 4px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.timeline-date {
    font-size: calc(13px * var(--font-scale)) !important;
    font-weight: bold !important;
    color: var(--font-color-detail);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.timeline-status {
    font-size: calc(13px * var(--font-scale)) !important;
    font-weight: 500 !important;
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Status colors */
.timeline-status.active {
    color: var(--public-status-used-text);
    background-color: var(--public-status-used-bg);
    border: 1px solid var(--public-status-used-bg);
}

.timeline-status.cancelled {
    color: var(--public-status-cancel-text);
    background-color: var(--public-status-cancel-bg);
    border: 1px solid var(--public-status-cancel-bg);
}

.timeline-status.pending {
    color: var(--public-status-nolegal-text);
    background-color: var(--public-status-nolegal-bg);
    border: 1px solid var(--public-status-nolegal-bg);
}

.timeline-status.default {
    color: var(--public-status-default-text);
    background-color: var(--public-status-default-bg);
    border: 1px solid var(--public-status-default-bg);
}

/* Dot colors for status */
.timeline-dot.active {
    background-color: var(--switch-timeline-dot-hover);
    border-color: var(--switch-timeline-dot-hover);
}

.timeline-dot.default {
    background-color: var(--switch-timeline-dot-hover);
    border-color: var(--switch-timeline-dot-hover);
}

/* Disabled item styles */
.timeline-item.disabled {
    pointer-events: none;
}

.timeline-item.disabled .timeline-title,
.timeline-item.disabled .timeline-date,
.timeline-item.disabled .timeline-status {
    color: #999 !important;
}

.timeline-item.disabled .timeline-dot {
    background-color: #ccc;
    border-color: #ccc;
}

/* Sidebar styles */
.public-sidebar {
    overflow-y: auto;
    overflow-x: hidden;
}

.content-menu-filter {
    padding: 0 16px;
}


/* Animation delays for timeline items */
.timeline-item:nth-child(2) { animation-delay: 0.1s; }
.timeline-item:nth-child(3) { animation-delay: 0.2s; }
.timeline-item:nth-child(4) { animation-delay: 0.3s; }
.timeline-item:nth-child(5) { animation-delay: 0.4s; }
.timeline-item:nth-child(6) { animation-delay: 0.5s; }
.timeline-item:nth-child(7) { animation-delay: 0.6s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .timeline-item {
        padding-left: 32px;
        margin-bottom: 24px;
    }

    .timeline-item.active {
        /*margin-left: 4px;*/
        padding: 8px 12px 8px 28px;
    }

    .timeline-dot {
        left: 9px;
        width: 10px;
        height: 10px;
    }

    .timeline-line {
        left: 12px;
        width: 3px;
    }

    .timeline-contents {
        padding: 12px;
        margin-left: 4px;
    }

    .timeline-title {
        font-size: calc(13px * var(--font-scale));
    }

    .timeline-date,
    .timeline-status {
        font-size: calc(11px * var(--font-scale));
    }
}




.box-content {
    background-color: var(--theme-color-second);
    border: 2px solid #4a5568;
    border-radius: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.eyes-open{
    text-align:end;
}


/* Toggle Theme Mode */

.theme-toggle-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 50px;
    transition: all 0.2s ease;
    outline:none;
}

.theme-toggle:hover {
    background-color: var(--hover-bg);
}

.toggle-track {
    width: 64px;      /* เพิ่มจาก 52px */
    height: 34px;     /* เพิ่มจาก 28px */
    background-color: var(--toggle-bg);
    border-radius: 17px;  /* ปรับตามความสูงใหม่ (34/2) */
    position: relative;
    transition: all 0.3s ease;
    box-shadow: var(--toggle-shadow);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.toggle-thumb {
    width: 28px;      /* เพิ่มจาก 22px */
    height: 28px;     /* เพิ่มจาก 22px */
    background-color: var(--toggle-thumb);
    border-radius: 50%;
    position: absolute;
    top: 2px;         /* คงเดิม */
    left: 4px;        /* ปรับจาก 3px */
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--toggle-thumb-shadow);
}

[data-theme-public="dark"] .toggle-thumb {
    transform: translateX(22px);
}

@media (max-width: 575px){
    .toggle-thumb{
        width: 22px;
        height: 22px;
        left: 3px;
    }

    .toggle-track {
        width: 52px;      /* เพิ่มจาก 52px */
        height: 28px;     /* เพิ่มจาก 28px */
        border-radius: 14px;
    }

    .sun-icon, .moon-icon {
        width: 14px;
        height: 14px;
    }

}
.sun-icon, .moon-icon {
    position: absolute;
    transition: all 0.3s ease;
    width: 18px;
    height: 18px;
}

.sun-icon {
    color: var(--sun-color);
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

.moon-icon {
    color: var(--moon-color);
    opacity: 0;
    transform: rotate(180deg) scale(0.3);
}

[data-theme-public="dark"] .sun-icon {
    opacity: 0;
    transform: rotate(-180deg) scale(0.3);
}

[data-theme-public="dark"] .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* End Toggle Theme Mode */



.tree-icon-container .check-content svg{
    color:var(--checkbox-color)
}

header ul[class*=header-] > li{
    background-color: var(--btn-dark);
}

input::placeholder {
    color: var(--body-font-color) !important;
}

/* สำหรับ browser เก่าๆ */
input::-webkit-input-placeholder {
    color: var(--body-font-color) !important;
}

.modern-input-group:has(.form-control:disabled),.form-control:disabled {
    background-color: var(--input-background-color-disabled) !important;
}

.form-control:disabled ::placeholder {
    color: var(--input-text-color-disabled-hover) !important;
}

/* สำหรับ browser เก่าๆ */
.form-control:disabled ::-webkit-input-placeholder {
    color: var(--input-text-color-disabled-hover) !important;
}


.cPTFZC:disabled{
    cursor: unset;
    color: var(--public-page-font-color-disabled) !important;
    fill: var(--public-page-font-color-disabled) !important;
}

.cPTFZC{
    color: var(--public-page-font-color) !important;
    fill: var(--public-page-font-color) !important;
}

.cPTFZC:hover:not(:disabled),.cPTFZC:focus:not(:disabled){
    background-color: var(--public-page-footer-hover);
}

.iframe {
    display: flex;
    justify-content: center;
    align-items: center;
}

.iframe-container {
    position: relative;
    display: inline-block;
    width: 90%;
}

.iframe-style {
    border: none;
    display: block;
}


/*File Card Public*/
.file-card-header {
    margin-bottom: 12px;
    align-items: flex-start;
}

.file-card-content {
    margin-bottom: 12px;
}

.file-card-text{
    margin-bottom: 15px;
}

.file-subtitle {
    color: var(--file-subtitle-color);
    font-size: calc( 13.5px * var(--font-scale));
    line-height: 1.4;
    word-break: break-word;
    padding-left: 2rem;
    padding-right: 2rem;
}


.file-subtitle-section{
    cursor:pointer;
}

/*.file-card-header-text:hover span{*/
/*    text-decoration: underline;*/
/*}*/

/* แบบ Custom จุดสี */
.custom-bullets {
    list-style: none; /* เพิ่มบรรทัดนี้ */
    padding-left: 0; /* เพิ่มบรรทัดนี้ */
    margin: 15px 0;
}

.custom-bullets li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
}

.custom-bullets li::before {
    content: "•";
    color: var(--file-subtitle-color-dot);
    font-size: 30px;
    position: absolute;
    left: 0;
    top: -5px; /* เพิ่มบรรทัดนี้ - ปรับให้อยู่บนสุด */
    line-height: 1; /* เพิ่มบรรทัดนี้ - ลด line-height ของจุด */
}

.custom-bullets li:hover {
    font-weight: bold !important;
    text-decoration: underline;
    transition: all 0.2s ease-in-out;
}

@media (max-width: 575px){
    .custom-bullets {
        margin: 10px 0;
    }

    .file-subtitle {
        padding-left: 1rem;
        padding-right: 0;
    }
    .text-end{
        display: flex;
        justify-content: end;
        gap: 5px;
    }
    .file-status-section{
        display: flex;
        justify-content: start;
        padding-bottom: 6px;
    }
}


/*Page */
.text-muted{
    color: var(--page-footer-number) !important;
}

.text-warning-danger {
    color: red;
    text-align: center;
    font-weight: bold;
}


.file-header-container{
    display: flex;
    align-items: center;
    gap: 8px;
}
.title-latest-version{
    font-weight: 700;
    font-size :calc(15px * var(--font-scale)) !important;
    padding-right: 5px;
    color:var(--text-lastest-verstion-color);
}