@media only screen and (min-width: 1201px)   {
.mobile-toggle { 
    display: none; 
    cursor: pointer; 
    flex-direction: column; 
    gap: 5px; 
}

    /*----------------------------------------------------------------*/
    .menu-bar {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        position: absolute;
        top: 0;
    }
    .menu-bar .menu-set {
        width: 100%;
        max-width: 1558px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 15px 50px;
    }
    .menu-bar .menu-set .left {
        width: 20%;
        height: auto;
        align-items: center;
        display: inline-flex;
        position: relative;
    }
    .nav-container {
        width: 80%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .menu-bar .menu-set .center {        
        width: 80%;
        height: auto;
        align-items: center;
        display: inline-flex;
        position: relative;
        justify-content: flex-end;
    }
    .menu-bar .menu-set .right {
        width: 20%;
        height: auto;
        align-items: center;
        display: inline-flex;
        position: relative;
        justify-content: flex-end;
    }
    .menu-bar .home-menu {
        width:auto;
		height: auto;
		display: inline-flex;
		align-items: center;
		font-size: 0.9rem;
    }
		.menu-bar .home-menu svg {
            width:auto;
			height: 40px;
			display: block;
            position: relative;
           margin-top: -14px;
		}		
		.menu-bar .home-menu svg path {
		    fill:#FFF;				   
        }
    .menu-bar .home-menu:hover path  {
        fill: #ED4D51;
    }
        .menu-bar .menu-list {
            width: auto;
            height: auto;
            display: inline-block;
            color: #888;
            margin-left: 20px;
            font-size: 0.8rem;
            font-weight: 400;
        }
        .menu-bar .menu-list:hover {
            color: #FFF;
        }
        .menu-bar .menu-list.active {
            color: #FFF;
            pointer-events: none;
        }
        .menu-bar .login-menu {
            width: auto;
            height: auto;
            display: inline-block;
            color: #FFF;
            font-size: 0.8rem;
            font-weight: 400;
            padding: 3px 25px;
            border: 2px solid #FFF;
            border-radius: 20px;
        }
        .menu-bar .login-menu:hover {
            background-color: #FFF;
            color: #1A1A1A;
        }
         .menu-bar .login-menu.active {
            border: 2px solid #ED4D51;
            color: #ED4D51;
        }
            .menu-bar .login-menu.active:hover {
                background-color: #ED4D51;
                color: #1A1A1A;
            }
    /*----------------------------------------------------------------*/
    .index-content {
        width: 100%;
        height: auto;
        display: block;
        background-image: url("../img/objects/bg-end.png");
        background-size:100%  auto ;
        background-position: bottom;
        background-repeat: no-repeat;
    }
    .index-content .index-content-set {
         width: 100%;
         max-width: 1558px;
         height: 60vh;
         display: flex;
        margin: 0 auto;
         align-items: center;
         justify-content: center;
         padding: 150px 30px;
        position: relative;
        background-image: url("../img/objects/mask icon.png");
        background-size: auto 100%;
        background-position: center;
        background-repeat: no-repeat;
    }
    .welcome-box {
         width: 100%;
        height: auto;
        display: block; 
        text-align: center;
    }
    .welcome-box .welcome-title {
        font-family: "Cabin";
        font-size: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
     .welcome-box .welcome-title .red {
         color: #FFF;
    }
    .welcome-box .welcome-title .white  {
         margin-left: 20px;
        color: #ED4D51;
    }
    .welcome-box .welcome-title svg {
            width:auto;
			height: 56px;
			display: inline-block;
            margin-left: 15px;
            margin-right: -15px;
		}		
		.welcome-box .welcome-title svg path{
		    fill:#FFF;			   
        }
     .welcome-box .welcome-mini-title {
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #BCBCBC;
    }
    .welcome-box .welcome-sub-title {
        font-size: 2rem;
        display: flex;
        font-weight: 400;
        align-items: center;
        justify-content: center;
    }
    /*----------------------------------------------------------------------------*/
     .index-content .index-about-set {
         width: 100%;
         height: auto;
        max-width: 1558px;
        margin: 0 auto;
         display: block;
         padding: 50px 200px;
        position: relative;
    }
    .index-about-set .about-title {
        font-size: 2rem;
        display: flex;
        font-weight: 400;
    }
    .index-about-set .about-title .red {
       color: #ED4D51;
    }
     .index-about-set .about-text {
         padding-right: 45%;
         font-size: 0.8rem;
         color: #BCBCBC;
    }
    .index-about-set .about-list-box {
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding:  20px 0 20px 100px;
    }
     .about-list-box .about-list-list {
         width: 49.5%;
         height: auto;
         border: 1px solid #FFF;
         border-radius: 25px;
         padding: 80px 20px 20px 20px;
         position: relative;
         margin: 5px 0;
     }
    .about-list-box .about-list-list .number {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background-color: #FFFFFF;
        color: #1A1A1A;
        display: flex;
        font-weight: 500;
        font-size: 0.8rem;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 20px;
     }
    .about-list-box .about-list-list .text {
         font-size: 0.8rem;
         color: #BCBCBC;
     }
     .index-about-set .about-text-low {
         padding-left: 45%;
         font-size: 0.8rem;
         color: #BCBCBC;
    }
    .index-content .index-members-set {
        width: 100%;
		height: auto;
		display: block;        
		position: relative;
        padding: 50px 0;
    }
    .index-members-set .index-members-box {
       width: 100%;
		height: auto;
		display: block;
		text-align: center;
		position: relative;
        margin-bottom: 30px;
    }
   .index-members-set .index-members-box a {        
        display: inline-block;
	}
    .index-members-set .index-members-box a img {
        width: auto;
        height: 90px;
        display: inline-block;
	}
    .index-members-set .index-members-box a:hover img {
        
        filter: grayscale(100%) brightness(1.2) contrast(1.1);
	}
    .index-members-set .members-title {
        font-size: 1rem;
        display: block;
        text-align: center;
        font-weight: 400;
    }
    .index-members-set .members-text {
        font-size: 0.8rem;
        color: #BCBCBC;
        text-align: center;
    }
    .index-content .index-footer-set {
        width: 100%;
        max-width: 1558px;
        margin: 0 auto;
		height: auto;
		display: flex;        
		position: relative;
        padding: 50px 200px;
    }
        .index-content .index-footer-set .footer-left {
            width: 25%;
            padding-right: 10px;
		    display: flex;        
            align-items: center;
        }        
        .index-content .index-footer-set .footer-center {
            width: 30%;
            padding-right: 10px;
		    display: flex;
            align-items: flex-end;
        }
        .index-content .index-footer-set .footer-right {
            width: 45%;
		    display: flex;
            align-items: flex-start;
        }
    .index-footer-set .follow-title {
        font-size: 0.8rem;
        color: #FFF;
        font-weight: 500;
    }
    .index-footer-set .follow-text {
        font-size: 0.8rem;
        color: #FFF;
        margin-top: 40px;
    }
     .index-footer-set .follow-text span {
        font-size: 1.5rem;
        color: #ED4D51;
         margin-right: 5px;
    }
    .index-footer-set .follow-box {
        width: 100%;
		height: auto;
		display: flex;        
    }
    .index-footer-set .follow-box .follow-link {
        width: 46px;
		height: 46px;
		display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        border-radius: 50%;
        border: 1px solid #FFF;
    }
   .index-footer-set .follow-box .follow-link svg {
            width:20px;
			height: auto;
			display: inline-block;
		}		
		.index-footer-set .follow-box .follow-link svg path {
		    fill: #FFF;	   
        }
    .video-container {
        position: relative;
        padding-bottom: 56.25%;
        width: 100%;
        filter: grayscale(100%);
          transition: filter 0.3s ease;

    }
    .video-container:hover {
  filter: grayscale(0%);
}
    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 25px;
    }
    .index-footer-set .follow-box .follow-link {
        width: 46px;
		height: 46px;
		display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 5px;
        border-radius: 50%;
        border: 1px solid #FFF;
    }
    .index-footer-set .footer-other-box {
        width: 100%;
        height: auto;
        display: block;
    }
    .footer-other-box .footer-other-list {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 25px;
        background-color: #323534;
        padding: 20px;
        margin-bottom: 10px;
    }
    .footer-other-box .footer-other-list img {
        width: 35px;
    }
     .footer-other-box .footer-other-list .other-text {
        font-size: 0.8rem;
        color: #FFF;
         margin-top: 10px;
    }
    /*----------------------------------------------------------------------------*/
    .footer-end-bar {
        padding: 10px 0;
        font-family: "Cabin";
        background-color: rgba(0,0,0,0.3);
        font-size: 0.7rem;
        text-align: center;
        font-weight: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #BCBCBC;
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    .footer-end-bar span {
        font-size: 1rem;
        padding-right: 5px;
        color: #ED4D51;
    }
    .footer-end-bar b {
        margin : 0 5px;
        font-weight: 500;
        color: #FFF;
    }
    /*----------------------------------------------------------------------------*/
    .btn-bar {
        width: 100%;
        height: auto;
        display: flex;
        margin-top: 10px;
    }
     .btn-bar.right {
         justify-content: flex-end;
    }
    .btn-bar .main-btn {
        width: auto;
        height: 30px;
        display: inline-block;
        color: #1A1A1A;
        font-size: 0.8rem;
        font-weight: 400;
        padding: 3px 25px;
        background-color: #FFF;
        border-radius: 20px;
        position: relative;
         margin-right: 28px;
    }
     .btn-bar .main-btn .icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFF;
        border-radius: 50%;
        position: absolute;
        top: 0;
        right: -28px;
    }
        .btn-bar .main-btn .icon svg {
            width:16px;
			height: auto;
			display: inline-block;
		}		
		.welcome-box .welcome-title svg path g {
		    fill: #1A1A1A;	   
        }
    .btn-bar .main-btn:hover {
       color: #3A3A3A;
    }
    .btn-bar .main-btn:hover .icon {
       background-color : #ED4D51;	   
    }
    .btn-bar .main-btn.loading .icon {
       background-color : #ED4D51;	   
    }
    .btn-bar .main-btn.loading {
        pointer-events: none;
        background-color: #C7C7C7;
    }
    .btn-group {
        width: 100%;
        height: auto;
        display: flex;
        margin-top: 10px;
    }
    .btn-group .btn-group-list {
        width: auto;
        height: auto;
        display: inline-flex;
        color: #FFF;
        font-size: 0.7rem;
        font-weight: 400;
        padding: 3px 20px;
        border-radius: 20px;
        margin-right: 5px;
        background-color: #343434;
    }
    .btn-group .btn-group-list:hover {        
        background-color: #2C2C2C;
    }
    .btn-group .btn-group-list.active {        
        background-color: #ED4D51;
        pointer-events: none;
    }
    /*----------------------------------------------------------------------------*/
    .database-content {
        width: 100%;
        height: auto;
        display: block;
    }
    .database-content .database-set {
        width: 100%;
        max-width: 1558px;
        margin: 0 auto;
        height: auto;
        display: block;
        padding: 30px 50px;
        position: relative;
    }
    .database-set .database-title {
        font-size: 1.5rem;
        display: flex;
        font-weight: 400;
    }
    .database-set .database-title .red {
       color: #ED4D51;
    }

    
   .database-set .database-category-box {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 10px;
       margin-top: 10px;
    }
    .database-category-box .category-list {
        width: calc((100% - (3 * 10px)) / 4);
        height: auto;
        display: block;
        background-color: #323534;
        border-radius: 25px;
        padding: 10px;
        padding: 20px;
    }
    .category-list .category-subtitle {
       font-size: 0.7rem;
        color: #BCBCBC;
    }
    .category-list .category-title {
       font-size: 0.8rem;
       color: #FFF;
       font-weight: 400;
    }
    .category-list .category-low {
        display: flex;
        width: 100%;
        height: auto;
        align-items: flex-end;
        position: relative;
        margin-top: 30px;
    }
    .category-list .category-low .number {
        font-size: 2.5rem;
        color: #FFF;
        font-weight: 500;
        position: absolute;
        bottom: -20px;
    }
    .category-list .category-low .number span {
        font-size: 0.8rem;
        color: #BCBCBC;
        font-weight: 100;
        margin-left: 10px;
    }
    .database-content .database-summary-box {
        width: 100%;
        height: auto;
        display: flex;
        margin-top: 10px;
        border-radius: 25px;
        overflow: hidden;
        border: 1px solid #545857;
    }
    .database-summary-box .summary-filter-box {
        width: 18%;
        height: auto;
        display: block;
        padding: 20px 20px 20px 20px;
    }
    .database-summary-box .summary-content-box {
        width: 82%;
        height: auto;
        display: block;
        padding: 10px;
    }
    .database-summary-box .summary-text-table {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      gap: 0 30px ;
      margin-top: 10px;
      margin-bottom: 20px;
    }
         .summary-text-table .summary-text-column {
            width: calc((100% - (2 * 30px)) / 3);
            height: auto;
            display: block;
            border-bottom: 1px dashed #545857;
            padding: 10px 0;
            align-items: center;
            flex-wrap: wrap;
         }
    .summary-text-table .summary-text-set {
        display: flex;
        height: auto;
        justify-content: space-between;
        align-items: baseline;
        position: relative;
        padding-left: 30px;
        width: 100%;
    }
     .summary-text-table .text-position {
         font-size: 0.8rem;
         font-weight: 400;
     }
    .summary-text-table .text-answer {
         font-size: 0.8rem;
         font-weight: 400;
         color: #FFCC4B;
     }
    .summary-text-table .summary-text-set.sub .text-position {
        font-size: 0.7rem;
        color: #BCBCBC;
    }
    .summary-text-table .summary-text-set.sub .text-answer {
        font-size: 0.7rem;
    }
    .summary-text-table .text-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        border: 1px solid #7C807F;
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
        left: 0;       
    }
        .summary-text-table .text-icon svg {
            width:14px;
			height: auto;
			display: inline-block;
		}		
		.summary-text-table .text-icon svg path {
		    fill:  #7C807F;	 
        }
    .summary-text-table .text-icon.active {
        border: 1px solid #FFCC4B;
    }
    .summary-text-table .text-icon.active path {
        fill:   #FFCC4B;
    }
    .summary-filter-box .filter-title {
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        color: #7C807F;
        font-weight: 400;
    }
   .summary-filter-box .filter-title .icon {
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
       .summary-filter-box .filter-title svg {
            width:16px;
            height: auto;
			display: inline-block;
            margin-right: 5px;
		}		
		.summary-filter-box .filter-title svg path {
		    fill: #7C807F;
        }
    
    .summary-filter-box .filter-list-box {
        width: 100%;
        height: auto;
        display: block;
        margin-top: 10px;
    }
    /*------------------------------------------------------------------------------*/
     .summary-text-column.focus {
      }
         .summary-text-column.focus .text-icon {
             top: 5px;
         }
         .summary-text-column.focus .text-position {
             font-size: 1.1rem;
             color: #E7DEA1;
        }
         .summary-text-column.focus .text-answer {
             font-size: 1.1rem;
        }
         .summary-text-column.focus .sub .text-position {
             font-size: 0.9rem;
        }
         .summary-text-column.focus .sub .text-answer {
             font-size: 0.9rem;
        }
    /*------------------------------------------------------------------------------*/
    .filter-list-box .filter-list-topic {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
         font-size: 0.7rem;
        font-weight: 400;
        cursor: pointer;
        color: #BCBCBC;
        transition: transform 0.3s ease;
    }
    .filter-list-box .filter-list-topic .icon {
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
        .filter-list-box .filter-list-topic svg {
            width:10px;
			height: auto;
			display: inline-block;
		}		
		.filter-list-box .filter-list-topic svg path {
		    fill:  #BCBCBC;
        }
    .filter-list-box .filter-list-topic:hover {
        color: #FFF;
    }
    .filter-list-box .filter-list-topic:hover svg path {
        fill:#FFF;
    }
    .filter-list-topic.active {
        color: #FFF;
    }
    .filter-list-topic.active .icon {
        transform: rotate(90deg);
    }
    .filter-list-topic.active svg path {
        fill: #ED4D51;	   
    }
    .summary-filter-box .filter-list-group {
        width: 100%;
        height: auto;
        display: none;
        padding-left: 20px;
    }
    .filter-list-group .filter-choose {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        position: relative;
        padding-right: 10px;
    }
    .filter-choose .status {
        width: 4px;
        height: 4px;
        display: inline-block;
        border-radius: 50%;
        background-color: #B1B1B1;
        left: -10px;
        position: absolute;
        transition: transform 0.3s ease;
    }
    .filter-choose .text {
        width: auto;
        height: auto;
        display: inline-block;
        font-size: 0.7rem;
        color: #BCBCBC;
        cursor: pointer;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        transition: transform 0.3s ease;
    }
    .filter-choose .text:hover {
        color: #FFF;
    }
    .filter-choose.active .text {
        color: #ED4D51;
    }
    .filter-choose.active .status {
        background-color:  #ED4D51;
    }
    
    .summary-content-box .summary-toppic {
        font-size: 0.9rem;
        font-weight: 400;
        width: auto;
        height: auto;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #FFF;
        transition: transform 0.3s ease;
    }
    .summary-content-box .summary-toppic .icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        margin-left: 15px;
        background-color: #FFF;
        border-radius: 50%;
        cursor: pointer;
    }
        .summary-content-box .summary-toppic svg {
            width:10px;
			height: auto;
			display: inline-block;
		}		
		.summary-content-box .summary-toppic svg path {
		    fill:  #1A1A1A;	 
        }
    .summary-content-box .summary-toppic:hover svg path {
        fill: #ED4D3E;
    }
    .summary-toppic.active {
        color: #FFF;
    }
    .summary-toppic.active .icon {
        transform: rotate(90deg);
    }

   
    .summary-content-box .summary-display-box {
        width: 100%;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
        margin-top: 10px;
    }
    .summary-display-box .display-box {
        flex-grow: 1;
        width: auto;
        height: auto;
        display: block;
        background-color: #323534;
        border-radius: 25px;
        padding: 20px;
    }
    .display-box .display-title {
        font-size: 0.8rem;
        color: #CCCCCC;
        font-weight: 400;
        position: relative;
        display: flex;
        align-items: center;
    }
    .display-box .display-title .icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid #FFCC4B;
        border-radius: 50%;
        position: absolute;
        right: 0;
        cursor: pointer;
    }
        .display-box .display-title .icon svg {
            width:10px;
			height: auto;
			display: inline-block;
		}		
		.display-box .display-title svg path {
		    fill: #FFCC4B;	   
        }
        .display-box .display-title .icon:hover {		    
            border: 2px solid #DFAF35;
        }
        .display-box .display-title .icon:hover path {		    
            fill:  #DFAF35;
        }
    .display-box .display-text-detail {
        width: auto;
        height: auto;
        display: flex;
        align-items: baseline;
    }
    #charts-container {
        margin-bottom: 20px;
    }
        .display-box .display-text-detail .main-text {
            font-size: 1rem;
            font-weight: 400;
            color: #FFF;
        }
        .display-box .display-text-detail .small-text {
            font-size: 0.7rem;
            color: #BCBCBC;
            margin-left: 5px;
        }
        .display-box .display-text-detail .small-text b {
            color: #FFF;
            font-weight: 400;
        }
    .display-box .display-detail {
        width: auto;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5px;
        margin-top: 20px;
    }
    .display-box .display-detail .fix-percent-tube {
        width: 100%;
        height: 22px;
        display: inline-flex;
        align-items: flex-end;
        border-radius: 20px; 
        overflow: hidden;
        color: #2F2F2F;
        background: repeating-linear-gradient(
            -45deg,
           #2B2B2B,
           #2B2B2B 5px,
           #2F2F2F 5px,
           #2F2F2F 10px 
        );
        margin-bottom: 20px;
    }
        .display-box .display-detail .fix-percent-tube .good-bar {
            width: auto;
            height: 22px;
            display: block;
            background-color: #37C86C;
        }
        .display-box .display-detail .fix-percent-tube .bad-bar {
            width: auto;
            height: 22px;
            display: block;
            background-color: #6582D8;
        }
    .display-box .display-detail .fix-explain-text {
        width: 100%;
        height: auto;
        display: flex;
        font-size: 0.7rem;
        align-items: center;
        color: #BCBCBC;
    }
        .display-box .display-detail .fix-explain-text .which {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: block;
            margin-right: 5px;
        }
            .display-box .display-detail .fix-explain-text .which.good {
            background-color: #37C86C;
            }
            .display-box .display-detail .fix-explain-text .which.bad {
            background-color: #6582D8;
            }
         .display-box .display-detail .fix-explain-text .result {
             margin: 0 5px;
        }
            .display-box .display-detail .fix-explain-text .result b {
                color: #FFFFFF;
                font-weight: 400;
            }
        .display-box .display-detail .fix-explain-text .percent {
            color: #FFCC4B;
            font-weight: 400;
        }
    .display-box .display-detail .v-percent-box {
        width: auto;
        height: auto;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
    }
    .display-box .display-detail .v-percent-box .each-percent-box {
        width: 75px;
        height: auto;
        display: block;
        flex-wrap: wrap;
        text-align: center;
    }
    .display-box .display-detail .v-percent-box .v-percent-tube {
        width: 22px;
        height: 100px;
        display: inline-flex;
        align-items: flex-end;
        border-radius: 15px; 
        overflow: hidden;
        color: #2F2F2F;
        background: repeating-linear-gradient(
            -45deg, /* มุมเอียง 45 องศา */
           #2B2B2B, /* สีที่ 1 */
           #2B2B2B 5px, /* ความหนาสีที่ 1 (เริ่ม 0 ถึง 10px) */
           #2F2F2F 5px, /* สีที่ 2 */
           #2F2F2F 10px  /* ความหนาสีที่ 2 (เริ่ม 10px ถึง 20px) */
        );
    }
    .display-box .display-detail .v-percent-box .v-percent-tube span {
        width: 30px;
        height: auto;
        display: block;
        background-color: #ED4D51;
    }
    .display-box .display-detail .v-percent-box .number {
        font-size: 0.9rem;
        font-weight: 400;
    }
    .display-box .display-detail .v-percent-box .percent-text {
        font-size: 0.7rem;
        font-weight: 400;
        color: #FFCC4B;
    }
    .display-box .display-detail .v-percent-box .text {
        font-size: 0.6rem;
    }
    .summary-display-box .display-box.manual-info {
        width: calc((100% - (1 * 10px)) / 2);
        flex-grow: 0;
    }
    .summary-display-box .display-box.manual-info .display-detail {
        width: 100%;
    }
    .display-box .display-detail .h-percent-box {
        width: 100%;
        height: auto;
        display: block;
    }
    .display-box .display-detail .h-percent-tube {
        width: 100%;
        height: 22px;
        display: inline-flex;
        align-items: center;
        border-radius: 20px;
        overflow: hidden;
        color: #2F2F2F;
        margin: 2px 0;
        position: relative;
        background: repeating-linear-gradient(-45deg, /* มุมเอียง 45 องศา */ #2B2B2B, /* สีที่ 1 */ #2B2B2B 5px, /* ความหนาสีที่ 1 (เริ่ม 0 ถึง 10px) */ #2F2F2F 5px, /* สีที่ 2 */ #2F2F2F 10px /* ความหนาสีที่ 2 (เริ่ม 10px ถึง 20px) */);
    }
   .display-box .display-detail .h-percent-tube span {
        width: auto;
        height: 22px;
        display: block;
        background-color: #C43336;
       position: absolute;
    }
    .display-box .display-detail .h-percent-tube .all-text {
        width: 100%;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        position: relative;
        z-index: 10;
    }
    .display-box .display-detail .h-percent-tube .all-text .text {
        font-size: 0.7rem;
        color: #FFF ;
    }
    .display-box .display-detail .h-percent-tube .all-text .percent-text {
        font-size: 0.7rem;
        font-weight: 400;
        color: #FFCC4B;
    }
    .display-box .display-show-all {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        font-size: 0.7rem;
        font-weight: 400;
        color: #BCBCBC;
        transition: transform 0.3s ease;
        margin-top: 20px;
    }
    .display-box .display-show-all .icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        margin-left: 10px;
        border: 2px solid #BCBCBC;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
        .display-box .display-show-all svg {
            width:10px;
			height: auto;
			display: inline-block;
            transform: rotate(90deg);
		}		
		.display-box .display-show-all svg path {
		    fill:  #BCBCBC;
        }
    .display-box .display-show-all:hover icon {
        border: 2px solid #FFF;
    }
     .display-box .display-show-all:hover path {
         fill:  #FFF;
    }
    
    .display-box .display-show-all.active svg {
        
            transform: rotate(-90deg);
    }
    
    
    .display-box.manual-info.active {
        width: 100%;
        padding: 10px 20px;
    }
    .display-box.manual-info.active .display-detail {
        display: none;
    }
    .display-box.manual-info.active .display-title .icon  {
        background-color: #ED4D51;
    }
    .database-content .display-case-table {
        width: 100%;
        height: auto;
        display: block;
        margin-top: 20px;
    }
    .display-case-table .header {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        font-size: 0.7rem;
        margin-top: 10px;
        border: 1px solid #343434;
        border-radius: 20px 20px 0 0;
        padding: 5px 10px;
        color: #BCBCBC;
        background-color: #2B2B2B;
    }
    .display-case-table .header .body {
        height: auto;
        display: inline-block;
        text-align: center;
    }
    .display-case-table .table-content {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        padding: 5px 10px;
        font-size: 0.7rem;
        border-left: 1px solid #343434;
        border-right: 1px solid #343434;
        border-bottom: 1px solid #343434;
    }
        .display-case-table .table-content .body {
            height: auto;
            display: inline-block;
            text-align: center;
            padding: 0 2px;
        }
    .display-case-table .table-footer {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #BCBCBC;
        background-color: #2B2B2B;
        border-left: 1px solid #343434;
        border-right: 1px solid #343434;
        border-bottom: 1px solid #343434;
        border-radius: 0 0 20px 20px;
        padding: 10px 10px;        
        font-size: 0.6rem;
    }
    .display-case-table .table-footer .left {
        width: 50%; 
    }
    .display-case-table .table-footer .right {
        width: 50%; display: flex;
        justify-content: flex-end;
    }
    .display-case-table .col-1 {
            width: 20%;
        }
    .display-case-table .col-2 {
            width: 40%;
        }
     .display-case-table .col-3 {
            width: 20%;
        }
      .display-case-table .col-4 {
            display: none !important;
        }
      .display-case-table .col-5 {
            width:20%;
        }
        .display-case-table .link {
            width: auto;
            height: auto;
            font-size: 0.7rem;
            font-weight: 400;
            color: #FFF;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }
       .display-case-table .link .icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
          .display-case-table .link svg {
                width:16px;
                height: auto;
                display: inline-block;
            }		
           .display-case-table .link svg path {
                fill: #FFF;
            }
        .display-case-table .link:hover {
            color: #9B9B9B;
        }
        .display-case-table .link:hover path {
            fill: #9B9B9B;
        }
     /*----------------------------------------------------------------------------*/
    .sign-content {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background-image: url("../img/objects/sign-btn.png");
        background-size: cover;
    }
    .sign-content .sign-content-set {
        width: 500px;
        height: auto;
        display: block;
        border: 1px solid #6B6B6B;
        border-radius: 25px;
        padding: 45px 60px 60px 60px;
        background-color: rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        position: relative;
    }
    .sign-content .back-main {
        width: auto;
        height: 30px;
        display: inline-block;
        color: #FFF;
        font-size: 0.8rem;
        font-weight: 400;
        padding: 3px 25px;
        background-color: #6B6B6B;
        border-radius: 20px;
        position: absolute;
        margin-left: 28px;
        top: -40px;
        left: 0;
    }
     .sign-content .back-main .icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #6B6B6B;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: -28px;
    }
        .sign-content .back-main svg {
            width:16px;
			height: auto;
			display: inline-block;
		}		
		.sign-content .back-main svg path {
		    fill: #FFF;	   
        }
    .sign-content .back-main:hover .icon {
         background-color : #ED4D51;	
    }
    .sign-content .sign-logo {
			width:100%;
			height: auto;
			display: inline-flex;
			align-items: center;
			font-size: 0.9rem;
			color: #FFF;
            margin-bottom: 15px;
		}
		 .sign-content .sign-logo svg {
				width:auto;
				height: 36px;
				display: block;
			 	position: relative;
				margin-right: 10px;
			}		
			   .sign-content .sign-logo svg path {
					fill:#FFF;				   
				}
        .sign-content .sign-topic {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
            .sign-content .sign-topic .topic-text {
                width: 50%;
			    font-size: 1.2rem;
                font-weight: 500;
			    color: #FFF;
            }
            .sign-content .sign-topic .topic-btn {
                width: auto;
                height: 30px;
                display: inline-block;
                color: #FFF;
                font-size: 0.8rem;
                font-weight: 400;
                padding: 3px 25px;
                background-color: #6B6B6B;
                border-radius: 20px;
            }
            .sign-content .sign-topic .topic-btn:hover {                
                background-color: #616161;
            }
    .sign-content .sign-input-box {
        width: 100%;
        height: auto;
        display: block;
        margin-top: 25px;
        position: relative;
    }
     .sign-content .sign-input-box .icon {
        width: 20px;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: absolute;
        bottom: 12px;
        right: 10px;
        cursor: pointer;
    }
        .sign-content .sign-input-box svg {
            width:20px;
			height: auto;
			display: inline-block;
		}		
		.sign-content .sign-input-box svg path {
		    fill: #FFF;	   
        }
    .sign-content .sign-input-box .icon:hover path {
        fill:  #ED4D51;	
    }
    .sign-input-box .input-title {
        font-size: 0.7rem;
		color: #DBDBDB;
        display: flex;
        justify-content: space-between;
        font-weight: 400;
    }
    .sign-input-box .input-title .alert {
		color: #ED4D51;	
    }
    .sign-input-box input {
        color: #ED4D51;
        border: none;
        font-size: 0.8rem;
        font-family: 'Prompt';
        padding: 10px;
        background-color: #323534;
        outline: none;
        width: 100%;
        height: 40px;
        border-radius: 5px;
    }
    .sign-input-box input:hover, .sign-input-box input:focus  {
        background-color: #2E3030;
    }
    .sign-input-box input:-webkit-autofill,
.sign-input-box input:-webkit-autofill:hover, 
.sign-input-box input:-webkit-autofill:focus, 
.sign-input-box input:-webkit-autofill:active {
    -webkit-text-fill-color: #ED4D51 !important; /* สีตัวอักษร */
    -webkit-box-shadow: 0 0 0 30px #323534 inset !important;
    box-shadow: 0 0 0 30px #323534 inset !important;
    caret-color: #ED4D51 !important; /* สีเคอร์เซอร์กะพริบตอน Autofill */
    transition: background-color 5000s ease-in-out 0s;
}
    .sign-input-box select {
        color: #ED4D51;
        border: none;
        font-size: 0.8rem;
        font-family: 'Prompt';
        padding: 0 10px;
        background-color: #323534;
        outline: none;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        border-radius: 5px;
    }
    .sign-input-box select:hover, .sign-input-box select:focus  {
        background-color: #2E3030;
    }
    .sign-content .sign-btn-box {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30px;
    }
    .sign-btn-box .left {
        width: auto;
        height: auto;
        display: block;
    }
    .sign-btn-box .right {
        width: auto;
        height: auto;
        display: block;
        padding-top: 10px;
    }
    .sign-btn-box .btn-text {
        font-size: 0.7rem;
        color: #DBDBDB;
    }
    .sign-btn-box .btn-text:hover {
        text-decoration: underline;
        color: #FFF;
    }
    .sign-content .sign-wrapper {
      position: relative;
      display: block;
      width: 100%;
      transition: all 0.3s ease
    }
    .sign-content .sign-all {
        display: flex;
          flex-direction: column;
          gap: 15px;
    }
    .sign-content .signup-box, .sign-content .forgot-box {
      display: none; 
    }
   .sign-content .sign-input-box .checkbox {
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        font: 400 0.7rem "Prompt", sans-serif;
        color: #FFF;
        user-select: none;
       padding-left: 35px;
        -webkit-user-select: none;
    }

    .sign-input-box .checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0; height: 0;
    }

/* สร้าง Custom Checkmark และสถานะ Hover/Checked */
    .sign-input-box .checkbox .checkmark {
        position: absolute;
        top: -2px; left: 0;
        height: 25px; width: 25px;
        border-radius: 5px;
        background-color: #343434;
        transition: 0.2s;
    }

    .sign-input-box .checkbox .text a {
        color: #FFCC4B;
    }
    .sign-input-box .checkbox .text a:hover {
        text-decoration: underline;
    }

    .sign-input-box .checkbox:hover input[type="checkbox"] ~ .checkmark { 
        background-color: #2E2E2E; 
    }
    .sign-input-box .checkbox input[type="checkbox"]:checked ~ .checkmark { 
        background-color: #ED4D51; 
    }
    /* ตัวเครื่องหมายถูก (After) */
    .sign-input-box .checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        top: 5px; left: 9px;
        width: 6px; height: 12px;
        border: solid #272727;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }
   .sign-input-box .checkbox input:checked ~ .checkmark:after { display: block; }
/*----------------------------------------------------------------------------*/
   .member-content {
       flex: 1;
        width: 100%;
        height: 100%;
       display: flex; /* ต้องเพิ่มตรงนี้เพื่อส่งต่อความสูงไปที่ลูก */
        flex-direction: column;
    }
    .member-content .member-set {
        width: 100%;
        max-width: 1558px;
        margin: 0 auto;
        height: auto;
        flex: 1; /* ใช้ flex: 1 แทน height: 100% เพื่อให้ยืดเต็มดันเนื้อหายาวลงไปได้ */
        display: flex;
        padding: 20px 50px;
        position: relative;
        box-sizing: border-box; /* สำคัญนักเทียว! ไม่งั้น padding จะดันจนเลย์เอาต์พัง */
    }
    .member-content .member-content-left {
        width: 20%;
        display: flex; 
        flex-direction: column;
    }
     .member-content .member-content-right {
         width: 80%;
         height: auto;
         display: block;
         padding-left: 20px;
         box-sizing: border-box;
    }
    .member-content .member-menu {
        width: 100%;
        flex: 1; /* ลบ height: auto ออก แล้วใช้ flex: 1 เพื่อยืดเต็มพื้นที่ของฝั่งซ้าย */
        display: block;
        border-radius: 25px;
        background-color: #323534;
        padding: 20px;
        box-sizing: border-box;
    }
    .member-menu .menu-topic {
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        color: #797F7E;
        font-weight: 400;
    }
    .member-menu .menu-box {
        width: 100%;
        height: auto;
        display: block;
        padding-left: 15px;
    }
    .member-menu .menu-text {
        font-size: 0.7rem;
        font-weight: 400;
        color: #BCBCBC;
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 25px;
        margin: 5px 0;
    }
    .member-menu .menu-text .icon {
        width: auto;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        left: 0;
        position: absolute;
    }
        .member-menu .menu-text .icon svg {
            width:16px;
			height: auto;
			display: inline-block;
		}		
		.member-menu .menu-text svg path {
		    fill: #BCBCBC;	   
        }
    .member-menu .menu-text:hover {
        color: #FFF;
    }
    .member-menu .menu-text:hover path {
        fill:  #FFF;
    }
    .member-menu .menu-text.active {
        color: #FFCC4B;
        pointer-events: none;
    }
    .member-menu .menu-text.active path {
        fill:  #FFCC4B;
    }
    .member-content .member-topic {
        color: #FFF;
        font-size: 1.2rem;
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .member-topic .back-main {
        width: auto;
        height: 30px;
        display: inline-block;
        color: #FFF;
        font-size: 0.8rem;
        font-weight: 400;
        padding: 3px 25px;
        background-color: #6B6B6B;
        border-radius: 20px;
        margin-left: 28px;
        position: relative;
    }
     .member-topic .back-main .icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #6B6B6B;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: -28px;
    }
        .member-topic .back-main svg {
            width:16px;
			height: auto;
			display: inline-block;
		}		
		.member-topic .back-main svg path {
		    fill: #FFF;	   
        }
    .member-topic .back-main:hover .icon {
         background-color : #ED4D51;	
    }
    .member-content .member-topic-sub {
        font-size: 0.7rem;
        color: #BCBCBC;
    }
    .member-content .member-topic-status {
        display: flex;
        width: 100%;
        align-items: center;
        margin-bottom: 10px;
    }
    .member-topic-status .status-text {
        font-size: 0.8rem;
        color: #BCBCBC;
        font-weight: 400;
    }
    .member-topic-status .status-text b {
        color: #FFF;
        font-weight: 400;
    }
    .member-topic-status .status-box {
                width: auto;
        height: auto;
        border-radius: 8px;
        padding: 2px 10px;
        font-size: 0.7rem;
        font-weight: 400;
        color: #ED4D51;
        background-color: #422729;
        margin-left: 10px;
    }
    .member-topic-status .status-box.active {
        color: #16DB00;
        background-color: #274227;
    }
    .member-topic-status .status-box.wait {
        color: #797F7E;
        background-color: #323534;
    }
    .menu-toggle-btn {
            display: none;
        }
    .member-content .member-topic-hide {
        display: flex;
        width: 100%;
        align-items: center;
        margin-bottom: 10px;
    }
    .member-topic-hide .text {
        font-size: 0.8rem;
        color: #FFF;
        font-weight: 400;
    }
    .member-topic-hide .icon {
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        margin-left: 15px;
        background-color: #FFF;
        border-radius: 50%;
        cursor: pointer;
    }
        .member-topic-hide .icon svg {
            width:10px;
			height: auto;
			display: inline-block;
		}		
		.member-topic-hide .icon svg path {
		    fill:  #1A1A1A;	 
        }
    .member-topic-hide .icon:hover svg path {
        fill: #ED4D3E;
    }
    .member-topic-hide.active .icon {
        transform: rotate(90deg);
    }
/*----------------------------------------------------------------------------*/
.table-box {
    width: 100%;
    height: auto;
    display: block;
    margin-top: 20px;
}
.table-box .top-header {
    width: 100%;
    height: auto;
    display: flex;
	align-items: center;
	justify-content: space-between;
}
    .table-box .top-header .btn-group {
        width: auto;
    }
	.table-box .top-header .btn-bar {
        width: auto;
        justify-content: right;
    }
.table-box .header {
    width: 100%;
    height: auto;
    display: flex;
	align-items: center;
    font-size: 0.7rem;
    margin-top: 10px;
    border: 1px solid #343434;
    border-radius: 20px 20px 0 0;
    padding: 5px 10px;
    color: #BCBCBC;
    background-color: #2B2B2B;
}
    .table-box .header .body {
        height: auto;
        display: inline-block;
        text-align: center;
    }
.table-box .table-content {
    width: 100%;
    height: auto;
    display: flex;
	align-items: center;
    padding: 5px 10px;
    font-size: 0.7rem;
    border-left: 1px solid #343434;
    border-right: 1px solid #343434;
    border-bottom: 1px solid #343434;
}
    .table-box .table-content .body {
        height: auto;
        display: inline-block;
        text-align: center;
        padding: 0 2px;
    }
    .table-box .status-icon {
        width: auto;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
         .table-box .status-icon svg {
            width:auto;
			 height: 18px;
			display: inline-block;
		}		
		 .table-box .status-icon svg path {
		    fill: #ED4D51;	   
        }
    .table-box .status-icon.active path {
        fill: #16DB00;
    }
    .table-box .status-icon.blue path { 
        fill: #2BC6F7;
    }
    .table-box .status-icon.orange path { 
        fill: #FFCC4B;
    }
    .table-box .status-icon.red path { 
        fill: #ED4D3E;
    }
    .table-box .status-icon.purple path { 
        fill: #A562DF;
    }
    .table-box .status-icon.green path { 
        fill: #5BF008;
    }
    .table-box .status-icon.white path { 
        fill: #FFF;
    }
    .table-box .table-btn {
        font-weight: 400;
        display: inline-block;
        width: auto;
        font-size: 0.6rem;
        padding: 2px 10px;
        color: #FFF;
        border-radius: 8px;
        background-color: #343434;
        margin-left: 5px;
    }
    .table-box .table-btn:hover {
        background-color: #2A2A2A;
    }
    .table-box .table-footer {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #BCBCBC;
        background-color: #2B2B2B;
        border-left: 1px solid #343434;
        border-right: 1px solid #343434;
        border-bottom: 1px solid #343434;
        border-radius: 0 0 20px 20px;
        padding: 10px 10px;        
        font-size: 0.6rem;
    }
    .table-box .table-footer .left {
        width: 50%; 
    }
    .table-box .table-footer .right {
        width: 50%; display: flex;
        justify-content: flex-end;
    }
    /*----------------------------------------------------------------------------*/
    .table-box.database .col-0 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px ;
        font-size: 0.7rem;
        color: #BCBCBC;
    }
    /*----------------------------------------------------------------------------*/
        .table-box.database .col-1 {
            width: 3%;
        }
        .table-box.database .col-2 {
            width: 10%;
        }
        .table-box.database .col-3 {
            width: 22%;
        }
        .table-box.database .col-4 {
            width: 25%;
        }
        .table-box.database .col-5 {
            width: 5%;
        }
        .table-box.database .col-6 {
            width: 20%;
        }
        .table-box.database .col-7 {
            width: 15%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    /*----------------------------------------------------------------------------*/
        .table-box.campaign .col-1 {
            width: 3%;
        }
        .table-box.campaign .col-2 {
            width: 10%;
        }
        .table-box.campaign .col-3 {
            width: 42%;
        }
        .table-box.campaign .col-4 {
            width: 10%;
        }
        .table-box.campaign .col-5 {
            width: 15%;
        }
        .table-box.campaign .col-6 {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
     /*----------------------------------------------------------------------------*/
        .table-box.letter .col-1 {
            width: 3%;
        }
        .table-box.letter .col-2 {
            width: 10%;
        }
        .table-box.letter .col-3 {
            width: 32%;
        }
        .table-box.letter .col-4 {
            width: 20%;
        }
        .table-box.letter .col-5 {
            width: 20%;
        }
        .table-box.letter .col-6 {
            width: 15%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    /*----------------------------------------------------------------------------*/
        .table-box.repeated .col-1 {
            width: 3%;
        }
        .table-box.repeated .col-2 {
            width: 15%;
        }
        .table-box.repeated .col-3 {
            width: 22%;
        }
        .table-box.repeated .col-4 {
            width: 25%;
        }
        .table-box.repeated .col-5 {
            width: 20%;
        }
        .table-box.repeated .col-6 {
            width: 15%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
    /*----------------------------------------------------------------------------*/
        .table-box.manifesto .col-1 {
            width: 3%;
        }
        .table-box.manifesto .col-2 {
            width: 10%;
        }
        .table-box.manifesto .col-3 {
            width: 42%;
        }
        .table-box.manifesto .col-4 {
            width: 25%;
        }
        .table-box.manifesto .col-5 {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
/*--------------------------------------------------------------------------------*/
 .form-box {
     width: 100%;
     height: auto;
     display: block;
     margin-top: 10px;
}
    .form-box .form-topic {
         font-size: 0.9rem;
        font-weight: 400;
    }
    .form-box .form-subtopic {
        font-size: 0.7rem;
        color: #BCBCBC;
    } 
    .form-box .form-subtopic.red {
        font-size: 0.7rem;
        color: #ED4D51;
    } 
    
    .form-box .form-subtopic.white {
        font-size: 0.7rem;
        color: #FFF;
    } 
    .form-box .form-subtopic .red {
        color: #ED4D51;
    } 
    .form-box .form-subtopic.bold {
        font-weight: 400;
    } 
     .form-box .form-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 30px;
        margin: 40px 0;
    }
    .input-box {
       width: calc((100% - (1 * 30px)) / 2);
       height: auto;
       display: block;
    }
     .input-box .input-title {
        font-size: 0.7rem;
        color: #FFF;
        font-weight: 400;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
         justify-content: space-between;
    }
     .input-box .input-title b {
         font-weight: 400;
         color: #ED4D51;
    }
    .input-box .input-title .icon {
       width: auto;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
        .input-box .input-title .icon svg {
            width: auto;
			height: 18px;
			display: inline-block;
		}		
		.input-box .input-title .icon svg path {
		    fill: #FFCC4B;	   
        }
        .input-box .input-title .icon:hover path {
            fill: #EDBA3A;
        }
    .input-box .input-bar {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;
    }
    .input-box .input-bar select {
        width: 100%;
        height: 40px;
        font-size: 0.7rem;
        display: inline-block;
        font-family: "Prompt", sans-serif;
        color: #FFCC4B;
        background-color: #202020;
        border: 1px solid #444 ;
        padding: 3px 12px;
        outline: none;
        border-radius: 10px;
    }
    .input-box .input-bar input {
        width: 100%;
        height: 40px;
        font-size: 0.7rem;
        display: inline-block;
        font-family: "Prompt", sans-serif;
        color: #FFCC4B;
        background-color: #202020;
        border: 1px solid #444 ;
        padding: 3px 12px;
        outline: none;
        border-radius: 10px;
    }
    .input-box .input-bar input:-webkit-autofill,
.input-box .input-bar input:-webkit-autofill:hover, 
.input-box .input-bar input:-webkit-autofill:focus, 
.input-box .input-bar input:-webkit-autofill:active {
    -webkit-text-fill-color: #FFCC4B !important; /* สีตัวอักษร */
    -webkit-box-shadow: 0 0 0 30px #202020 inset !important;
    box-shadow: 0 0 0 30px #202020 inset !important;
    caret-color: #FFCC4B !important; /* สีเคอร์เซอร์กะพริบตอน Autofill */
    transition: background-color 5000s ease-in-out 0s;
}
    .input-box .input-bar textarea {
        width: 100%;
        height: 100px;
        font-size: 0.7rem;
        display: inline-block;
        font-family: "Prompt", sans-serif;
        color: #FFCC4B;
        background-color: #202020;
        border: 1px solid #444 ;
        padding: 3px 12px;
        outline: none;
        border-radius: 10px;
    }

   
    .input-box .input-bar .checkbox {
        display: flex;
        align-items: center;
        position: relative;
        padding-left: 45px;
        margin-bottom: 12px;
        cursor: pointer;
        font: 400 0.7rem "Prompt", sans-serif;
        color: #FFCC4B;
        user-select: none;
        -webkit-user-select: none;
    }

    .input-box .input-bar .checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 0; height: 0;
    }
    .input-box .input-bar .checkbox input[type="radio"] {
        position: absolute;
        opacity: 0;
        width: 0; height: 0;
    }
    
    .input-box .input-bar .checkbox input[type=text] {
        position: relative;
        opacity: 1;
        width: 100%;
        height: 40px;
    }
/* สร้าง Custom Checkmark และสถานะ Hover/Checked */
    .input-box .input-bar .checkbox .checkmark {
        position: absolute;
        top: -2px; left: 10px;
        height: 25px; width: 25px;
        border-radius: 5px;
        background-color: #343434;
        transition: 0.2s;
    }

    .input-box .input-bar .checkbox:hover input[type="checkbox"] ~ .checkmark { 
        background-color: #2E2E2E; 
    }
    .input-box .input-bar .checkbox input[type="checkbox"]:checked ~ .checkmark { 
        background-color: #FFCC4B; 
    }
    
     .input-box .input-bar .checkbox:hover input[type="radio"] ~ .checkmark { 
        background-color: #2E2E2E; 
    }
    .input-box .input-bar .checkbox input[type="radio"]:checked ~ .checkmark { 
        background-color: #FFCC4B; 
    }

    /* ตัวเครื่องหมายถูก (After) */
    .input-box .input-bar .checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
        top: 5px; left: 9px;
        width: 6px; height: 12px;
        border: solid #272727;
        border-width: 0 3px 3px 0;
        transform: rotate(45deg);
    }

    .input-box .input-bar .checkbox input:checked ~ .checkmark:after { display: block; }
    
    .input-box .input-bar .day {
        width: calc(20% - 4px);
    }
    .input-box .input-bar .month {
        width: calc(60% - 12px);
    }
    .input-box .input-bar .year {
        width: calc(20% - 4px);
    }
    .input-box .input-bar .other-main {
        width: calc(60% - 5px);
    }
    .input-box .input-bar .other-text {
        width: calc(40% - 5px);
    }
     .input-box .input-bar .two-cal {
        width: calc(50% - 5px);
    }
    .input-box .input-bar .equal {
        width: calc(33.0% - 5px);
    }
    .input-box.full {
       width: 100%;
       height: auto;
       display: block;
    }
   #case_p_status_other_input {
    width: auto !important; /* ล้างคำสั่ง 100% อันเก่าทิ้งซะ! */
    flex: 1; /* สั่งให้ยืดพอดีกับพื้นที่ที่เหลือในบรรทัดเดียวกัน ไม่ร่วงแน่นอนเจ้าค่ะ! */
    margin-left: 10px; /* เว้นระยะห่างจากตัวหนังสือข้อ 999 สักนิด จะได้ไม่อึดอัด */
    position: absolute;
       left: 100px;
}
    .where_name_box {
        position: relative;
        width: 100%;
    }
    .where_name_box .where_name_list {
        position: absolute; 
        bottom: 100%; left: 0; 
        margin-bottom: 2px;
        z-index: 999; 
        background: #343434; 
        width: 100%; 
        display: none; 
        max-height: 200px; 
        overflow-y: auto; 
        box-shadow: 0px -4px 6px rgba(0,0,0,0.1);
        border-radius: 15px;
    }
     .where_name_box ul {
         list-style-type: none; 
         margin: 0; 
         padding: 0;
    }
     .where_name_box ul li {
         padding: 5px 15px; 
         cursor: pointer; 
         font-size: 0.7rem;
         color: #FFCC4B;
    }
    .where_name_box ul li:hover {
        background-color: #292828; 
    }
    .input-box [disabled] {
        pointer-events: none;
        opacity: 0.25 !important;
    }
    .form-box .form-btn-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content:space-between;
        margin-top: 10px;
        border-top: 1px solid #343434;
        padding: 10px 0 30px 0;
    }
    .form-btn-box .btn-bar {
        width: 50%;
    }
    .form-btn-box .delete-btn {
        font-size: 0.7rem;
        font-weight: 400;
        color: #ED4D51;
    }
    .form-btn-box .delete-btn:hover {        
        color: #D0363A;
    }
    .form-btn-box .password-btn {
        font-size: 0.7rem;
        font-weight: 400;
        color: #FFF;
    }
    .form-btn-box .password-btn:hover {        
        color: #E4E4E4;
    }
/*----------------------------------------------------------------------------*/    
   .dashboard-display-box { 
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        /* 💡 บังคับให้ไอเทมในแถวเดียวกันมีความสูงเท่ากับตัวที่สูงที่สุดเจ้าค่ะ */
        align-items: stretch; 
        gap: 10px;
        margin-top: 20px;
    }
    .dashboard-display-box .dashboard-box {
       width: calc((100% - (2 * 10px)) / 3);
    background-color: #323534;
    border-radius: 25px;
    padding: 20px;
    display: flex;
    flex-direction: column; 
    justify-content: center;
    }
    .dashboard-box .dashboard-title {
        font-size: 0.8rem;
        font-weight: 400;
        color: #FFF;
    }
        .dashboard-box .dashboard-subtitle {
            font-size: 0.7rem;
            font-weight: 400;
            color: #797F7E;
        }
        .dashboard-box .dashboard-status {
            width: auto;
            height: auto;
            border-radius: 8px;
            font-size: 0.6rem;
            font-weight: 400;
            color: #ED4D51;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .dashboard-box .dashboard-status .time {
            width: auto;
            height: auto;
            border-radius: 8px;
            font-size: 0.6rem;
            font-weight: 400;
            color: #A8A8A8;
            display: inline-block;
        }
        .dashboard-box .dashboard-text-link {
            width: auto;
            height: auto;
            font-size: 0.7rem;
            font-weight: 400;
            color: #FFF;
            display: inline-flex;
            align-items: center;
            white-space: nowrap;
        }
        .dashboard-box .dashboard-text-link .icon {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
            .dashboard-box .dashboard-text-link svg {
                width:16px;
                height: auto;
                display: inline-block;
            }		
           .dashboard-box .dashboard-text-link svg path {
                fill: #FFF;
            }
        .dashboard-box .dashboard-text-link:hover {
            color: #9B9B9B;
        }
        .dashboard-box .dashboard-text-link:hover path {
            fill: #9B9B9B;
        }
    .dashboard-box.blue { 
        border: 1px solid #2BC6F7;
    }
    .dashboard-box.orange { 
        border: 1px solid #FFCC4B;
    }
    .dashboard-box.red { 
        border: 1px solid #ED4D3E;
    }
    .dashboard-box.purple { 
        border: 1px solid #A562DF;
    }
    .dashboard-box.green { 
        border: 1px solid #5BF008;
    }
    .dashboard-status.blue { 
        color: #2BC6F7;
    }
    .dashboard-status.orange { 
        color: #FFCC4B;
    }
    .dashboard-status.red { 
        color: #ED4D3E;
    }
    .dashboard-status.purple { 
        color: #A562DF;
    }
    .dashboard-status.green { 
        color: #5BF008;
    }
     .dashboard-box .dashboard-low {
        display: flex;
        width: 100%;
        height: auto;
        align-items: flex-end;
        position: relative;
        margin-top: 30px;
    }
    .dashboard-box .dashboard-low .number {
        font-size: 2.5rem;
        color: #FFF;
        font-weight: 500;
        position: absolute;
        bottom: -20px;
    }
    .dashboard-box .dashboard-low .number span {
        font-size: 0.8rem;
        color: #BCBCBC;
        font-weight: 400;
        margin-left: 10px;
    }
    .dashboard-box .vote-number {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
    }
    .dashboard-box .vote-number .vote-percent {
        font-size: 2.5rem;
        color: #FFF;
        font-weight: 500;
    }
    .dashboard-box .vote-number .vote-detail {
        font-size: 0.7rem;
        color: #FFF;
        font-weight: 400;
    }
    .dashboard-box .vote-number .vote-detail {
        font-size: 0.75rem;
        color: #FFF;
        font-weight: 400;
        text-align: right;
    }
    .dashboard-box .vote-bar {
        width: 100%;
        display: flex;
        border-radius: 20px;
        height: 20px;
        background: repeating-linear-gradient(-45deg, /* มุมเอียง 45 องศา */ #2B2B2B, /* สีที่ 1 */ #2B2B2B 5px, /* ความหนาสีที่ 1 (เริ่ม 0 ถึง 10px) */ #2F2F2F 5px, /* สีที่ 2 */ #2F2F2F 10px /* ความหนาสีที่ 2 (เริ่ม 10px ถึง 20px) */);
        position: relative;
        overflow: hidden;
    }
    .dashboard-box .vote-bar .win-line {
        height: 20px;
        display: block;
        position: absolute;
        background-color: rgba(0,0,0,0.1);
        z-index: 10;
    }
    .dashboard-box .vote-bar .loading {
        height: 20px;
        display: block;
        position: absolute;
        z-index: 9;
        background-color: #ED4D3E;
    }
    .dashboard-box .vote-number .agree {
        color: #FFF;
    }
    .dashboard-box .vote-number .disagree {
        color: #A8A8A8;
    }
    .dashboard-box .dashboard-vote-low {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20px;
    }
    .dashboard-box .dashboard-vote-low .vote-btn {
        width: auto;
        height: 30px;
        display: inline-block;
        color: #1A1A1A;
        font-size: 0.7rem;
        font-weight: 500;
        padding: 5px 15px 0px 15px;
        background-color: #FFF;
        border-radius: 20px;
    }
    .dashboard-box .dashboard-vote-low .vote-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        
    }
    
    
       .dashboard-box .dashboard-vote-low .vote-icon svg {
           width:auto;
           height: 16px;
           display: inline-block;
           fill: #323534;	   
		}		
    .dashboard-box.green .vote-icon {
        background-color: #5BF008;
    }
    .dashboard-box.green .vote-icon svg {
        fill: #323534;	
    }
    .dashboard-box.purple .vote-icon {
        background-color: none;
    }
    .dashboard-box.purple .vote-icon svg {
            width: 32px;
            height: 32px;
           display: inline-block;
		}	
    .dashboard-box.purple .vote-icon svg g {
        fill: #A562DF;	
    }
    
    /*-------------------------------------------------------------------------*/
    .dashboard-display-box .recommend-box {
       width: calc((100% - (3 * 10px)) / 4);
        background-color: #323534;
        border-radius: 25px;
        padding: 20px;
        display: flex;
        flex-direction: column; 
        justify-content: flex-start;
    }

   .recommend-box .recommend-text {
        font-size: 0.7rem;
        color: #ACB0AF
    }
    .recommend-box .recommend-text b {
        font-size: 0.7rem;
        color: #FFF;
        font-weight: 400;
    }
    .dashboard-display-box .top-icon {
        width: 44px;
		height: 44px;
		display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        border-radius: 50%;
        border: 1px solid #FFF;
    }
  .dashboard-display-box .top-icon svg {
            width:24px;
			height: auto;
			display: inline-block;
		}		
		.dashboard-display-box .top-icon svg path {
		    fill: #FFF;	   
        }
     .vote-all-box { 
         display: none;
    }
/*----------------------------------------------------------------------------*/
    .scenario-content {
        width: 100%;
        height: auto;
        display: block;
    }
    .scenario-content .scenario-set {
        width: 100%;
        max-width: 1558px;
        margin: 0 auto;
        height: auto;
        display: block;
        padding: 30px 50px;
        position: relative;
    }
    .scenario-set .scenario-title {
        font-size: 1.5rem;
        display: flex;
        font-weight: 400;
    }

    .scenario-set .scenario-shelf-box {
      display: flex;
      flex-wrap: wrap;       /* ให้ขึ้นบรรทัดใหม่เมื่อล้น */
      justify-content: flex-start; /* กระจายพื้นที่ว่างระหว่างกล่อง */
      gap: 10px;
      margin-top: 10px;
    }
    .scenario-shelf-box .scenario-shelf-list {
        width: calc((100% - (2 * 10px)) / 3);
        height: auto;
        display: block;
        border-radius: 25px;
        padding: 5px;
        background-size: cover;
        border: 1px solid #343434;
        position: relative;
        transition: filter 0.3s ease;
    }
    .scenario-shelf-box .scenario-shelf-list:hover {

        border: 1px solid #4D4D4D;

    }
    .scenario-shelf-box .scenario-shelf-list img {
        border-radius: 20px;
        -webkit-filter: grayscale(100%); /* สำหรับ Webkit เจ้าค่ะ */
    filter: grayscale(100%);
    opacity: 0.9; /* แถมความจางนิดๆ ให้ดูขรึมเจ้าค่ะ */
    transition: filter 0.3s ease; /* แถม transition ให้ดูแพงเจ้าค่ะ */
        image-rendering: crisp-edges;
    }
    .scenario-shelf-box .scenario-shelf-list .cate {
        font-size: 0.6rem;
        position: absolute;
        z-index: 10;
        padding: 1px 10px;
        border: 1px solid #FFF;
        border-radius: 20px;
        font-weight: 400;
        top: 15px;
        left: 15px;
    }
    .scenario-shelf-box .scenario-shelf-list .icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #FFF;
        border-radius: 50%;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 10;
    }
     .scenario-shelf-box .scenario-shelf-list .icon:hover  {
       background-color : #ED4D51;	   
    }
        .scenario-shelf-box .scenario-shelf-list .icon svg {
            width:16px;
			height: auto;
			display: inline-block;
            fill: #1A1A1A;	   
		}		
     .scenario-shelf-box .scenario-shelf-list .name-box {        
        position: absolute;
        z-index: 10;
        font-weight: 400;
        bottom: 15px;
        left: 0;
        padding: 0 15px;
        display: block;
        width: 100%;         
    }
    .scenario-shelf-box .scenario-shelf-list .name-box .name {
        font-size: 0.8rem;
        color: #FFF;
    }
    .scenario-shelf-box .scenario-shelf-list .name-box .name:hover {
        color: #ED4D51;
    }
     .scenario-content .scenario-footer {
          width: 100%;
          height: auto;
          display: flex;
          align-items: center;
          justify-content: space-between;
         margin: 20px 0;
         font-size: 0.7rem;
    }
    
    .scenario-content .scenario-read-set {
        width: 70%;
        height: auto;
        display: block;
        margin: 30px auto;
        position: relative;
    }
     
    .scenario-content .scenario-read-cover {
        width: 100%;
        display: block;
        image-rendering: -webkit-optimize-contrast; /* สำหรับ Safari/Chrome เก่าเจ้าค่ะ */
        image-rendering: crisp-edges;               /* มาตรฐานสากลเจ้าค่ะ */
        image-rendering: pixelated;
        position: relative;
    }
    .scenario-content .scenario-read-cover img {
        border-radius: 25px 25px 0 0;
        width: 100%;
    }
    .scenario-content .scenario-read-set .cate {
        font-size: 0.8rem;
        position: absolute;
        z-index: 10;
        padding: 1px 10px;
        border: 1px solid #FFF;
        border-radius: 20px;
        font-weight: 400;
        top: 15px;
        left: 15px;
    }
    .scenario-content .scenario-read-set .name-box {
        width: 100%;
        height: auto;
        display: flex;
        color: #FFF;
        position: absolute;
        bottom: 0;
        font-weight: 400;
        font-size: 2rem;       
        padding: 15px;
    }
     .scenario-read-set .read-content {
        width: 100%;
        height: auto;
        display: block;
        background-color: #FFF;
        padding: 25px;
        position: relative;
        border-radius: 0 0 25px 25px;
    }
    .scenario-read-set .scenario-option {
        width: 100%;
        height: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .scenario-read-set .scenario-option .btn-group {
        width: auto;
        margin-top: 0;
    }
    .scenario-read-set .scenario-option .back-main {
        width: auto;
        height: 30px;
        display: inline-block;
        color: #FFF;
        font-size: 0.8rem;
        font-weight: 400;
        padding: 3px 25px;
        background-color: #6B6B6B;
        border-radius: 20px;
        margin-left: 28px;
        position: relative;
    }
     .scenario-read-set .scenario-option .back-main .icon {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #6B6B6B;
        border-radius: 50%;
        position: absolute;
        top: 0;
        left: -28px;
    }
        .scenario-read-set .scenario-option .back-main svg {
            width:16px;
			height: auto;
			display: inline-block;
		}		
		.scenario-read-set .scenario-option .back-main svg path {
		    fill: #FFF;	   
        }
    .scenario-read-set .scenario-option .back-main:hover .icon {
         background-color : #ED4D51;	
    }
    .scenario-read-set .scenario-detail {
        color: #000;
        font-size: 0.9rem;
        margin-top: 20px;
        transition: font-family 0.3s ease;
    }
    .scenario-detail.font-special {
        font-family: "Sarabun", sans-serif !important;
    }
   .scenario-detail p {
	    display: block;
       min-height: 30px;
       line-height: 1.5rem;
    }
    .scenario-detail li {
       line-height: 1.5rem;
    }
	.scenario-detail a {
			color: #EC1D22;
			text-decoration: underline;
		}
	.scenario-detail a:hover {
			color: #CC1519;
		}
	.scenario-detail table {
			margin: 0 auto;
			border: 1px solid #B3B3B3;
			border-collapse: collapse;
		}
	.scenario-detail th{
			border: 1px solid #B3B3B3;
		}
	.scenario-detail td {
			padding: 5px;
			border: 1px solid #B3B3B3;
		}
	.scenario-detail blockquote {
			display: block;
			font-size: 1rem;
			color:#EC1D22;
			margin: 20px 0;
			padding: 20px;
			text-align: center;
			font-weight: bold;
		}
	.scenario-detail figure {
            width: 80%;
    		margin: 20px 10%;
        }
    .scenario-detail .video-box {
			position: relative;
			width: 100%;
			height: 0;
			padding-bottom: 56.25%;
		}
	.scenario-detail iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	.scenario-detail .image-style-align-left  {
			width: 50%;
			float: left;
		}
	.scenario-detail .image-style-align-right  {
			width: 50%;
			float: right;
		}
	.scenario-detail figcaption {
			color: #333;
			background-color: #f7f7f7;
			padding: 0.6em;
			font-size: .75em;
			display: block;
			text-align: center;
				-webkit-user-modify: read-write;
		overflow-wrap: break-word;
		-webkit-line-break: after-white-space;
		}
/*----------------------------------------------------------------------------*/
    .experience-content {
        width: 100%;
        height: auto;
        display: block;
    }
    .experience-content .experience-set {
        width: 70%;
        height: auto;
        display: block;
        margin: 30px auto;
        position: relative;
    }
  .experience-content .cover {
        width: 100%;
        display: block;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        image-rendering: pixelated;
        position: relative;
    }
     .experience-content .cover img {
        border-radius: 25px 25px 0 0;
    }
     .experience-content .cover .topic {
        width: 100%;
        height: auto;
        display: flex;
        color: #FFF;
        position: absolute;
         justify-content: center;
        bottom: 0;
        font-weight: 400;
        font-size: 2rem;
        padding: 15px;
    }
     .experience-content .detail {
        width: 100%;
        height: auto;
        display: block;
        background-color: #323534;
        padding: 25px;
        position: relative;
        border-radius: 0 0 25px 25px;
    }
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------*/
    
    
    
    
/*----------------------------------------------------------------------------*/
    
    .loader {
        border: 4px solid rgba(0, 0, 0, 0.2); /* Light gray background border */
        border-top: 4px solid #80171A;      /* Blue loading segment */
        border-radius: 50%;                 /* Makes the element a perfect circle */
        width: 20px;                        /* Set width and height to the same value */
        height: 20px;
        animation: spin 0.5s linear infinite;  /* Apply the spin animation */
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);        /* Start rotation at 0 degrees */
    }
    100% {
        transform: rotate(360deg);      /* End rotation at 360 degrees */
    }
}
/*----------------------------------------------------------------------------------------*/
/*-PAGUNATION-------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------*/
.pagination-bar {
	width: auto;
	height: auto;
	display: flex;
	text-align: center;
    
}
	.pagination-bar a {
		display: block;
		font-size: 0.6rem;
		width: auto;
		height: auto;
		padding: 3px 12px;
		margin: 0 5px;
		text-align: center;
		border-radius: 10px;
		color: #FFF;
		font-weight: 400;
	}
	.pagination-bar a.arrow {
		border: 1px solid #E5E5E5;
	}
	
	.pagination-bar a:hover {
		background-color:#121212;
	}
	.pagination-bar a.arrow:hover {
		background-color: #121212;
	}
	.pagination-bar a.active {
		background-color: #ED4D51;
		pointer-events: none;
	}
/*-----------------------------------------------------------------------------*/
/*-POPUP-----------------------------------------------------------------*/
/*-----------------------------------------------------------------------------*/
.blur {
    -webkit-filter: blur(1.7px);
    -moz-filter: blur(1.7px);
    -o-filter: blur(1.7px);
    -ms-filter: blur(1.7px);
    filter: blur(1.7px);
	pointer-events: none;
}
.popup-bg {
	width:  100vw;
    height: auto;
    min-height: 100vh;
    display: flex;
	align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 100;
    padding: 50px  0 100px 0;
}
    .popup-bg .popup-box {
		width: 450px;
		height: auto;
		background-color: #333;
        border: 1px solid #444;
		border-radius: 25px;
		display: block;
		opacity: 0;
        position: relative;
        padding:  20px 20px 20px 80px;
        transform: scale(0.7) translateY(-30px);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}
	.popup-bg .popup-box.open {
	  	opacity: 1;
        transform: scale(1) translateY(0);
	}
		.popup-box .alert-icon {
			width: 36px;
			height: 36px;
			display: flex;
            display: block;
            position: absolute;
            color: #ED4D51;
            top: 25px;
            left: 25px;
		}
        .popup-box .alert-icon.green {
            color: #2ecc71;
        }
     .popup-box .alert-icon.yellow {
            color: #FFCC4B;
        }
		.popup-box .title {
			width: 100%;
			height: auto;
			display: block;
			font-size: 1rem;
			color: #FFF;
		}
		.popup-box .text {
			width: 100%;
			height: auto;
			display: block;
			font-size: 0.7rem;
			color: #BCBCBC;
		}
			.popup-box .text b {
				color: #ED4D51;
				font-weight: normal;
			}
		.popup-box .btn-box {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			margin-top: 15px;
		}
			.popup-box .btn-box .confirm {
                width: auto;
                height: 30px;
                display: inline-block;
                color: #1A1A1A;
                font-size: 0.8rem;
                font-weight: 400;
                padding: 3px 25px;
                background-color: #FFF;
                border-radius: 20px;
                position: relative;
                margin-right: 48px;
			}
            .popup-box .btn-box .confirm .icon {
                width: 30px;
                height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: #FFF;
                border-radius: 50%;
                position: absolute;
                top: 0;
                right: -28px;
            }
                .popup-box .btn-box .confirm .icon svg {
                    width:16px;
                    height: auto;
                    display: inline-block;
                }
				.popup-box .btn-box .confirm:hover .icon {
					background-color: #ED4D51;
				}
                .popup-box .btn-box .confirm.loading .icon {
                   background-color : #ED4D51;	   
                }
                .popup-box .btn-box .confirm.loading {
                    pointer-events: none;
                    background-color: #C7C7C7;
                }
			.popup-box .btn-box .cancel {
				width: auto;
                height: 30px;
                display: inline-block;
                color: #FFF;
                font-size: 0.8rem;
                font-weight: 400;
                padding: 3px 25px;
                background-color: #666;
                border-radius: 20px;
                position: relative;
			}
				.popup-box .btn-box .cancel:hover {
					background-color: #555;
				}
            .popup-box .btn-box .v-link {
				width: auto;
                height: 30px;
                display: inline-block;
                color: #FFF;
                font-size: 0.8rem;
                font-weight: 400;
                padding: 3px 25px;                
                background-color: #666;
                border-radius: 20px;
                margin-right: 10px;
			}
				.popup-box .btn-box .v-link:hover {
					background-color: #555;
				}
             .popup-box .btn-box .v-link.active {     
                background-color: #5BF008;
                 color: #245609;
                 pointer-events: none;
			}
   /*-----------------------------------------------------------------------------*/ 
    .letter-page {
        background: #f0f0f0; font-family: 'Sarabun', sans-serif; padding: 50px;
    }
    .video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* สัดส่วน 16:9 */
    height: 0;
    overflow: hidden;
    margin: 20px 0;
}
.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
     .member-moblie-menu {
         display: none;
    }
      .menu-toggle-btn {
        display: none;
        
    }
    .menu-toggle-btn .icon {
        display: none;
    }
   
    .mobile-medium-1 {
    }
  /*-----------------------------------------------------------------------------*/
    .search-box {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        gap: 10px;
    }
     .search-box input {
        color: #ED4D51;
        border: none;
        font-size: 0.8rem;
        font-family: 'Prompt';
        padding: 3px 20px;
        background-color: #323534;
        outline: none;
        width: 30%;
        height: 30px;
        border-radius: 25px;
    }
    .search-box input:-webkit-autofill,
    .search-box input:-webkit-autofill:hover, 
    .search-box input:-webkit-autofill:focus, 
    .search-box input:-webkit-autofill:active {
        -webkit-text-fill-color: #ED4D51 !important; 
        -webkit-box-shadow: 0 0 0 30px #323534 inset !important;
        box-shadow: 0 0 0 30px #323534 inset !important;
        caret-color: #ED4D51 !important; 
        transition: background-color 5000s ease-in-out 0s;
    }
    .search-box input:hover, .search-box input:focus  {
        background-color: #2E3030;
    }
    .search-box .btn-group-list {
        width: auto;
        height: 30px;
        align-items: center;
        display: flex;
        white-space: nowrap;
        color: #FFF;
        font-size: 0.7rem;
        font-weight: 400;
    }
    .search-box .btn-group-list:hover {
        color: #E7E7E7;
    }
    .search-box .btn-group-list.active {
        width: auto;
        height: 30px;
        display: inline-flex;
        align-items: center;
        color: #343434;
        font-size: 0.7rem;
        font-weight: 500;
        padding: 3px 20px;
        border-radius: 20px;
        margin-right: 5px;
        background-color: #FFF;
    }
    .search-box .btn-group-list.active:hover {
        background-color: #EFEFEF;
    }
  /*-----------------------------------------------------------------------------*/
  /*-----------------------------------------------------------------------------*/   
    
    
}