.TextStyle1
            { margin: 5px 0px 0px 0px; padding : 5px 5px 0px 00px ; font-size : 26px ;font-weight: bold ;}
        .TextStyle2
            { padding : 5px 0px 0px 0px ; ;}
        .buttonStyle_right    
            {cursor : pointer ;background-color : green ;color : white ; padding : 10px 15px 10px 15px ; border: none ;display:inline ; margin-bottom:5px ;float:right ;}
     
        .buttonStyle_right2
            { float : right ; margin : 5px 0px 5px 5px ; background-color : green ; padding : 5px 10px 5px 10px;}
        .buttonStyle_right2 a
            { text-decoration:none; color:white ; }
        .headerTextIndex1
            { padding : 10px 10px 10px 20px  ; background-color : #f39c12 ;color : white ; margin: 0px 0px 20px 0px ; font-size:18px;}
        .inputStyleIndex
            { width : 70%; padding : 10px 10px 10px 10px ; margin : 0px 0px 40px 0px ; font-size:18px; border: none ; border-radius : 5px ;}
        #videoFrame 
            { float : left ; margin : 0px 35px 20px 0px ;min-height :370px ;  border : none;}
        #iFrameStyle
            { width : 100% ; height : 240px ; }
        #mainVideoFrame 
            {padding: 20px ;height : 1200px; }
			
		#headerService
			{font-size : 22px ; margin : 20px 100px 10px 100px ;}
		#textService 
			{margin : 0px 100px 30px 100px  ; line-height : 1.5 ; text-align : justify;}
			
		#imageService 
			{width : 40% ;margin :10px 0px 20px 0px  ;}
			
		#imageArticle
			{padding-left : 0px ; padding-right : 0px ; height :auto ; max-width :1080px ;border : 1px solid #999 ; border-radius : 5px; cursor : pointer ;}
		
		#frameProduct 
			{ min-height :130px ; margin-top : 10px ; /*margin-left : 15px ; margin-right : 15px ;*/ /*border : solid 1px #999 ;*/ padding : 10px ; }

		.buttonStyle
			{ padding : 10px 12px 10px 12px; margin-left : 10px ; margin-right : 10px ;;border-radius: 4px; background-color :white ; font-weight :bold;}
			
		#stateArticle
			{margin-left : 10px ; font-size : 12px ; cursor : pointer ; padding-top: 3px ; font-weight : bold ;}

		#stateOwner
			{margin-left : 260px ; font-size : 14px ;padding-top: 3px ;}

		#stateOwnerArticle
			{margin-left : 10px ; font-size : 12px ; cursor : pointer ; padding-top: 3px ; font-weight : bold ;}
		
		
		
		.buttonAction
			{float : right ;display : inline ; padding: 5px 10px 5px 10px ;cursor :  pointer ;margin-left :5px ;border-radius : 3px ; background-color:#0F0 ; color : white; font-weight:bold ; font-size:14px;}
		
		.buttonAction a
			{text-decoration : none ; color : #FFF ; font-weight:bold ; font-size:14px;}
		
		#nameArticle 
			{margin: 20px 0px 0px 10px ; font-size : 36px ; cursor : pointer ; font-weight: bold ;}

		#stateArticle
			{margin-left : 10px ; font-size : 12px ; cursor : pointer ; padding-top: 3px ; font-weight : bold ;}

		#descArticle 
			{margin-left : 10px; font-style : italic  ; font-size : 18px ;  padding : 3px ;  margin-top : 5px ;  display : block ; line-height : 22px ;}
		
        #contentArticle 
			{margin-left : 10px;  font-size : 18px ;  padding : 3px ;   margin-top : 5px ;  display : block ; line-height : 22px ; text-align : justify ;}
		
.category-drawer-toggle {
    position: fixed;
    left: 18px;
    top: 50%;
    z-index: 160;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #166534;
    color: #ffffff;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.24);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    transform: translateY(-50%);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.category-drawer-toggle-lines {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 18px;
}

.category-drawer-toggle-lines span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 999px;
    background: #ffffff;
}

.category-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(15, 23, 42, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

.category-drawer {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    width: min(330px, 88vw);
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    box-shadow: 18px 0 42px rgba(15, 23, 42, 0.18);
    transform: translateX(-105%);
    transition: transform 0.26s ease;
}

.category-drawer.is-open {
    transform: translateX(0);
}

body.category-drawer-open .category-drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
}

.category-drawer-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 18px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.category-drawer-kicker {
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.category-drawer-header h2 {
    margin: 4px 0 0;
    color: #111827;
    font-size: 20px;
    line-height: 1.2;
}

.category-drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    background: #f9fafb;
    color: #111827;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

.category-drawer-list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 94px);
    min-height: 0;
    overflow-y: auto;
    padding: 14px;
}

.category-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 50px;
    padding: 13px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.category-drawer-link:hover,
.category-drawer-link.is-active {
    background: #ecfdf5;
    border-color: #86efac;
    color: #14532d;
    transform: translateX(2px);
}

.category-drawer-link span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-drawer-link strong {
    flex: 0 0 auto;
    min-width: 28px;
    padding: 3px 7px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-size: 12px;
    text-align: center;
}

.category-drawer-link.is-active strong,
.category-drawer-link:hover strong {
    background: #16a34a;
    color: #ffffff;
}

.category-empty-state {
    grid-column: 1 / -1;
    padding: 28px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #4b5563;
    text-align: center;
}

.homepage-products-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.homepage-products-heading h2 {
    margin: 0;
}

.homepage-products-heading p {
    margin: 6px 0 0;
    color: #667085;
    font-size: 14px;
}

.homepage-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 6px;
}

.homepage-page-link,
.homepage-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
}

.homepage-page-link {
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #1f2937;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.homepage-page-link:hover,
.homepage-page-link.is-active {
    border-color: #16a34a;
    background: #16a34a;
    color: #ffffff;
    transform: translateY(-1px);
}

.homepage-page-link.is-disabled {
    border-color: #e5e7eb;
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.homepage-page-prev,
.homepage-page-next {
    min-width: 72px;
}

.homepage-page-ellipsis {
    color: #6b7280;
}

body.category-drawer-open {
    overflow-x: hidden;
}

body.category-drawer-open .category-drawer-toggle {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}


        
        
            
        @media screen and (max-width: 800px) 
            {
                 #videoFrame 
                    { float : none ; width : 100% ; margin : 0px 0px 20px 0px ;min-height :280px ; border : none ; }
                    
                #mainVideoFrame 
                    {padding: 20px ;background: linear-gradient(to bottom, #66ccff 0%, #ffffff 98%) ; height : auto;}
                    
                #mainVideoFrame2
                    {padding: 20px ;background: linear-gradient(to bottom, #66ccff 0%, #ffffff 98%) ; height : auto ;}
                
                .inputStyleIndex
                    { width : 90%;  padding : 10px 10px 10px 10px ; margin : 0px 0px 40px 0px ; font-size:24px; border: none ; border-radius : 5px ;}
				
				#headerService
					{font-size : 22px ; margin : 10px ;}
				#textService
					{margin : 10px  ; line-height : 1.5 ; text-align : justify;}
				#imageService 
					{width : 100% ;margin :10px 0px 20px 0px  ;}
					
				#imageArticle
					{padding-left : 0px ; padding-right : 0px ; height :auto ; width :100%; border : 1px solid #999 ; border-radius : 5px; cursor : pointer ;}

                .category-drawer-toggle {
                    left: auto;
                    right: 16px;
                    top: auto;
                    bottom: 18px;
                    min-height: 50px;
                    padding: 0 16px;
                    transform: none;
                }

                .category-drawer {
                    left: 12px;
                    right: 12px;
                    top: auto;
                    bottom: 82px;
                    width: auto;
                    max-height: calc(100vh - 108px);
                    max-height: calc(100dvh - 108px);
                    border: 1px solid #e5e7eb;
                    border-radius: 14px;
                    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
                    transform: translateY(calc(100% + 110px));
                }

                .category-drawer.is-open {
                    transform: translateY(0);
                }

                .category-drawer-header {
                    padding: 16px 16px 12px;
                }

                .category-drawer-list {
                    box-sizing: border-box;
                    max-height: none;
                    min-height: 0;
                    padding: 12px 12px 18px;
                    width: 100%;
                }

                .category-drawer-link {
                    display: grid;
                    grid-template-columns: minmax(0, 1fr) max-content;
                    align-items: center;
                    gap: 10px;
                    font-size: 13px;
                    line-height: 1.3;
                    min-height: 52px;
                    padding: 14px 12px;
                    max-width: 100%;
                    overflow: visible;
                }

                .category-drawer-link:hover,
                .category-drawer-link.is-active {
                    transform: none;
                }

                .category-drawer-link span {
                    display: block;
                    line-height: 1.28;
                    max-width: 100%;
                    min-width: 0;
                    overflow: hidden;
                    overflow-wrap: anywhere;
                    word-break: break-word;
                    text-overflow: clip;
                    white-space: normal;
                }

                .category-drawer-link strong {
                    align-self: start;
                    justify-self: end;
                    min-width: 30px;
                    min-height: 22px;
                    padding: 4px 8px;
                    font-size: 11px;
                    line-height: 1.2;
                    overflow: visible;
                    white-space: nowrap;
                }

                .homepage-products-heading {
                    align-items: flex-start;
                    flex-direction: column;
                    gap: 8px;
                }

                .homepage-pagination {
                    justify-content: flex-start;
                    margin-top: 22px;
                    overflow-x: auto;
                    padding-bottom: 4px;
                }

                .homepage-page-link,
                .homepage-page-ellipsis {
                    min-width: 38px;
                    min-height: 38px;
                    padding: 0 10px;
                }
		
                
            }
        @media screen and (max-width: 400px) 
            {
              
                
                
            }