/* --- การตั้งค่า Dark Mode กลาง --- */
:root {
	--color-dmbackground: #f9f9f9;
	--color-dmline: #e5e7eb;
    --color-dmtexth: #062f3f;
	--color-dmtextht: #72787e;
	--color-dmtextdt: #566061;
	--color-dmtexdthover: #062f3f;
	--color-dmiconproducts: #062f3f;
	--color-dmtextvalue: #1a1c1c;
}

.dark {
	--color-dmbackground: #1a1c1c;
	--color-dmline: #3f3f3f;	
    --color-dmtexth: #e8e8e8;
	--color-dmtextht: #8c8c8c;
	--color-dmtextdt: #d8d8d8;
	--color-dmtexdthover: #ffffff;
	--color-dmiconproducts: #ffffff;
	--color-dmtextvalue: #ffffff;
}

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .header-gradient-border {
            position: relative;
        }
        .header-gradient-border::after {
            content: "";
            position: absolute;
            bottom: -15px;
            left: 0;
            right: 0;
            height: 15px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
            pointer-events: none;
        }
        @keyframes infinite-scroll {
            from { transform: translateX(0); }
            to { transform: translateX(calc(-50% - 12px)); }
        }
        .animate-infinite-scroll {
            animation: infinite-scroll 45s linear infinite;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            overflow-x: hidden;
            width: 100%;
			font-family: 'Prompt', sans-serif;
			font-family: 'Sukhumvit Set', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        @keyframes custom-bounce {
            0%, 100% { transform: translateY(0); opacity: 0.3; }
            50% { transform: translateY(6px); opacity: 1; }
        }
        .animate-bounce {
            animation: custom-bounce 1.8s infinite ease-in-out;
        }

        .customer-logo-item img {
            transform: scale(1);
            transition: transform 0.3s ease-in-out;
        }
        .customer-logo-item:hover img {
            transform: scale(1.15) !important;
        }
		/* กำหนดค่าเริ่มต้นของ Element ที่จะให้เลื่อนเข้ามา */
.reveal {
    opacity: 0;
    transform: translateY(30px); /* เลื่อนขึ้นเล็กน้อย */
    transition: all 0.8s ease-out; /* ระยะเวลาการเฟดและเลื่อน */
}

/* คลาสที่จะถูกเพิ่มเข้ามาเมื่อเลื่อนถึง */
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
		
	/* --- CSS สำหรับปุ่ม หล่อหุ้มแกน --- */
/* เพิ่มการควบคุม overflow */
.roller-logo {
    width: 100%;
    height: 100%;
    overflow: visible; /* สำคัญ: ป้องกันภาพขาดตอนหมุน */
}

.ure-circle {
    /* ตั้งค่าเริ่มต้น */
    stroke-width: 0; 
    stroke-dasharray: 630; /* ความยาวเส้นรอบวงที่รัศมี 70 */
    stroke-dashoffset: 630;
    transition: all 0.5s ease-out; 
    transform-origin: 150px 150px;
	opacity: 0.8;
	stroke: #ffffff;
}

/* ตอน Hover: เส้นหนาขึ้นและวิ่ง */
.roller-container:hover .ure-circle {
    /* 1. เพิ่มความหนาเส้น */
    stroke-width: 65px;
    /* 2. ปรับรัศมี (r) ให้เล็กลง เพื่อชดเชยความหนาที่เพิ่มเข้ามา ทำให้ขอบนอกไม่ขยายออก */
    /* เดิม r=70 เมื่อหนาขึ้น 20px (ครึ่งหนึ่งของ 40) ต้องปรับ r เป็น 50 */
    r: 90;
    stroke-dashoffset: 0;
	* เพิ่มแสง Glow เข้าไป */
    
}

/* หมุนลูกปืน: ปรับ origin ให้ตรงกับกลาง svg คือ 150 150 */
#bearing-group {
    transform-origin: 150px 150px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.roller-container:hover #bearing-group {
    transform: rotate(45deg);
	
}
.roller-container:hover .roller-logo {
    filter: url(#glow); /* ใส่แสง Glow */
}



		/* --- CSS สำหรับปุ่ม งานตามแบบ --- */

/* 1. เส้นกราฟ (Drawing Path) */
.draw-line {
    fill: none;
    stroke: #ffffff; /* สีขาว */
    stroke-width: 8px;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* ตั้งค่าความยาวเส้นที่นี่ */
    stroke-dasharray: 400; 
    stroke-dashoffset: 400;
    transition: stroke-dashoffset 0.8s ease-out;
}

/* 2. กลุ่มวงเวียน (Compass) */
.compass-group {
    transform-origin: 240px 150px; /* จุดหมุนที่วงเวียน */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    fill: #ffffff;
	
}

/* 3. ส่วนของกระดาษ */
.paper {
    fill: #ffffff;
	
}

/* เมื่อ Hover ที่กลุ่มปุ่ม (group) - สั่งให้ลูกทั้ง 2 ตัวทำงาน */
.group:hover .draw-line {
    stroke-dashoffset: 0; /* วาดเส้นจนเต็ม */
	
}

.group:hover .compass-group {
    transform: rotate(-10deg) 
		       translateX(-5px)
		       translateY(-5px); /* หมุนวงเวียน */
	
}
		.draw-container:hover .drawing-logo {
    filter: url(#glow); /* ใส่แสง Glow */
		}
			
			/* แอนิเมชันสำหรับปรอท */
.temp-logo {
    width: 100%;
    height: 100%;
    overflow: visible;
	color: currentColor;  /* หากต้องการให้สีตามตัวอักษรของ Container (เช่น text-white) */
}

.mercury-line {
    transform-origin: 150px 250px;
    animation: mercuryPulse 3s ease-in-out infinite;
}

@keyframes mercuryPulse {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

/* แอนิเมชันสำหรับhardness */
.hardness-logo {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.st0 { stroke-width: 2.86px; fill: none; stroke: currentColor; stroke-miterlimit: 10; }
.st1 { stroke-width: 5.72px; fill: none; stroke: currentColor; stroke-miterlimit: 10; }

/* แอนิเมชันสำหรับเข็ม */
#harrow {
    transform-origin: 150px 133.78px;
    animation: rotateNeedle 5s ease-in-out infinite;
}

@keyframes rotateNeedle {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(190deg); }
    100% { transform: rotate(0deg); }
}

/* แอนิเมชันสำหรับ icon-resistivity */
.resistivity-logo {
    width: 100%;
    height: 100%;
    overflow: visible;
    color: currentColor;
    transform: translateZ(0); /* บังคับใช้ GPU Acceleration */
}

#resistivity-id {
    stroke-width: 9px;
    stroke-dasharray: 500; 
    stroke-dashoffset: 500;
    animation: drawLine 2s linear infinite; 
    stroke: currentColor;
    will-change: stroke-dashoffset; /* แจ้งเบราว์เซอร์ล่วงหน้าว่าจะอนิเมตค่านี้ */
}

@keyframes drawLine {
    0% { stroke-dashoffset: 500; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -500; }
}

/* ซ่อน Scrollbar แต่ยังเลื่อนได้ */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* แถบเลื่อนด้านข้างที่ปัดได้เหมือนมือถือ */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* เพิ่มการจัดวางให้ลื่นไหล */
    -webkit-overflow-scrolling: touch; 
}

/* การปรับแต่ง Scrollbar แบบมินิมอล ล้ำสมัย (Track ใส เห็นเฉพาะตัวเลื่อน) */
.custom-scrollbar {
    scrollbar-width: thin;
    /* สำหรับ Firefox: ทำให้ track ใส และกำหนดสี thumb */
    scrollbar-color: rgba(113, 113, 113, 0.5) transparent; 
}

/* กำหนดความกว้างของ Scrollbar แนวตั้ง และความสูงของแนวนอน */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* ทำให้ Track ใส มองไม่เห็น */
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

/* ตัวเลื่อน (Thumb) แบบโปร่งแสง โค้งมนสวยงาม */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(113, 113, 113, 0.4);
    border-radius: 9999px;
    border: 1px solid transparent; /* ป้องกันขอบแตก */
    background-clip: content-box;
}

/* เมื่อเอาเมาส์ไปชี้ที่ Scrollbar ตัวเลื่อนจะเข้มขึ้นชัดเจน */
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(113, 113, 113, 0.8);
}

/* รองรับ Dark Mode ให้ตัวเลื่อนมีความกลมกลืนและสวยงามยิ่งขึ้น */
.dark .custom-scrollbar {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.3);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.6);
}

.color-circle {
        border-radius: 9999px;
        overflow: hidden;
    }