/* ITKB Global Stylesheet v2.0
    Optimized for Performance, Dark Mode, and Layout Shift Prevention
*/

/* --- 1. Variables & Root --- */
:root {
    /* Colors */
    --primary: #2563eb;
    --primary-dark: #1e3a8a;
    --bg: #f8fafc;
    --white: #ffffff;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    
    /* Header Gradient */
    --header-start: #1e3a8a;
    --header-mid: #3b82f6;
    --header-end: #8b5cf6;
    --header-shadow: rgba(0, 0, 0, 0.2);

    /* Navbar & Footer Specific */
    --nav-height: 64px;
    --nav-navy: #1e3a8a;
    --footer-bg: #ffffff;
    --footer-border: #e2e8f0;
}

/* --- 2. Dark Mode Settings --- */
body.dark-mode {
    --bg: #0f172a;
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --white: #1e293b;
    --border-color: #334155;

    --header-start: #020617;
    --header-mid: #0f172a;
    --header-end: #1e3a8a;
    --header-shadow: rgba(0, 0, 0, 0.4);

    --nav-navy: #60a5fa;
    --footer-bg: #0f172a;
    --footer-border: #1e293b;
}

/* --- 3. Base Styles --- */
* { 
    box-sizing: border-box; 
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html, body, div, section, header {
    max-width: 100vw;
    transition: none; 
}
body.theme-transitioning {
    transition: background 0.3s ease, color 0.3s ease !important;
}

body {
    font-family: 'Kanit', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    margin: 0;
    color: var(--text-main);
    padding-top: var(--nav-height);
    line-height: 1.6;
}

.container { 
    max-width: 1000px; 
    margin: 0 auto; 
    padding: 0 20px;
    width: 100%;
}

/* --- 4. Navbar Styles (ย้ายมาจาก JS) --- */
.nav-bar {
    position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height);
    background: var(--white); display: flex; align-items: center;
    justify-content: space-between; padding: 0 24px; z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
    border-bottom: 1px solid var(--border-color);
}

.nav-logo { text-decoration: none; display: flex; align-items: center; gap: 10px; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-links a { 
    text-decoration: none; color: var(--text-muted); 
    font-weight: 500; font-size: 0.95rem; transition: 0.3s;
    padding: 8px 14px; border-radius: 20px;
    display: inline-flex; align-items: center; gap: 6px;
}

/* Logic: หน้าแรก/หน้าอื่น */
body.is-home .nav-home-link { display: none !important; }
.nav-home-icon { display: none; }
body:not(.is-home) .nav-home-icon { display: inline-flex; }
body:not(.is-home) .nav-home-text { display: none; }
body:not(.is-home) .nav-home-link { background: rgba(30, 58, 138, 0.05); font-size: 1.1rem; }

.nav-links a:hover { color: var(--nav-navy); background: rgba(30, 58, 138, 0.05); }

/* Language & Theme & Music Buttons */
.lang-btn {
    border: none; background: none; cursor: pointer;
    padding: 5px 12px; border-radius: 15px;
    font-size: 11px; font-weight: 700; color: var(--text-muted);
}
.lang-btn.active { background: var(--nav-navy); color: #ffffff; }

.theme-toggle, .music-trigger {
    background: none; border: 1px solid var(--border-color);
    color: var(--text-main); cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}

/* Music Player UI */
.music-container { position: relative; display: flex; align-items: center; }
.eq-mini { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq-mini span { width: 2.5px; background: var(--nav-navy); height: 20%; border-radius: 1px; }
.eq-mini.playing span { animation: eq-bounce 0.8s infinite alternate; }
.eq-mini.playing span:nth-child(2) { animation-delay: 0.2s; }
.eq-mini.playing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes eq-bounce { 0% { height: 20%; } 100% { height: 100%; } }

.music-panel {
    position: absolute; top: 50px; right: 0;
    background: var(--white); border: 1px solid var(--border-color);
    padding: 15px; border-radius: 16px; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: none; flex-direction: column; gap: 12px; width: 200px; z-index: 1001;
}
.music-panel.show { display: flex; }
.volume-slider { width: 100%; accent-color: var(--nav-navy); cursor: pointer; }
.music-btn-main {
    background: var(--nav-navy); color: white; border: none;
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* --- 5. Header & Hero --- */
header {
    position: relative; overflow: hidden;
    padding: 80px 20px 100px; min-height: 280px; text-align: center;
    background: linear-gradient(135deg, var(--header-start) 0%, var(--header-mid) 50%, var(--header-end) 100%);
    color: white; border-radius: 0 0 30px 30px; display: flex; flex-direction: column; justify-content: center; align-items: center;
}

.hero h1 { 
    font-size: 2.8rem; 
    font-weight: 700; 
    color: #ffffff;
    line-height: 1.2; /* กำหนดบรรทัดให้ชัดเจน ไม่ให้ดีดตอนเปลี่ยนฟอนต์ */
    min-height: 3.4rem; /* จองที่ให้ตัวอักษร 1 บรรทัด */
    text-shadow: 0 4px 15px var(--header-shadow);
    transition: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero p { 
    opacity: 0.9; 
    font-size: 1.2rem; 
    margin-top: 15px; 
    min-height: 1.8rem; /* จองที่ให้คำอธิบาย */
}

/* --- 6. Tool Card & Content --- */
.tool-card-container {
    background: var(--white); padding: 24px; border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); margin: -50px auto 30px;
    border: 1px solid var(--border-color); position: relative; z-index: 10;
}
.grid-2-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.seo-content { 
    margin: 50px auto;
    display: block;
    line-height: 1.8;
    background: var(--white);
    padding: 40px 25px;
    border-radius: 30px; 
    border: 1px solid var(--border-color);
    max-width: 950px;
    box-sizing: border-box;
    overflow-wrap: break-word;
    width: 90%;
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.03),
        0 15px 35px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.seo-content:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.05),
        0 25px 50px rgba(0, 0, 0, 0.1);
}

.seo-inner h2 {
    color: var(--primary);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.seo-content ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 0;
    list-style: none;
    margin: 25px 0;
}

.seo-content li {
    background: rgba(37, 99, 235, 0.05);
    padding: 15px 20px;
    border-radius: 12px;
    border-left: 4px solid var(--primary);
}

.pros-box { background: rgba(34, 197, 94, 0.08); padding: 15px; border-radius: 12px; border: 1px solid rgba(34, 197, 94, 0.2); }
.cons-box { background: rgba(239, 68, 68, 0.08); padding: 15px; border-radius: 12px; border: 1px solid rgba(239, 68, 68, 0.2); }

/* --- 7. Footer Styles (ย้ายมาจาก JS) --- */
footer {
    background: var(--footer-bg); color: var(--text-main);
    padding: 40px 20px; border-top: 1px solid var(--footer-border);
    margin-top: 50px; transition: 0.3s;
}

.footer-content { max-width: 1000px; margin: 0 auto; text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 25px; margin-bottom: 25px; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: var(--text-main); font-weight: 500; font-size: 0.9rem; }
.footer-links a:hover { color: var(--primary); }

.footer-social { display: flex; justify-content: center; gap: 30px; margin-bottom: 25px; }
.footer-social a { color: var(--text-main); font-size: 1.5rem; transition: 0.2s; }
.footer-social a:hover { color: var(--primary); transform: translateY(-3px); }

.copyright { 
    font-size: 0.8rem; color: var(--text-muted); margin-top: 25px; 
    padding-top: 20px; border-top: 1px solid var(--footer-border); 
}

/* AdSense Container */
.adsense-footer-container {
    max-width: 728px; height: 90px; margin: 0 auto 30px;
    background: rgba(100, 116, 139, 0.05); border: 1px dashed var(--border-color);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    contain: strict;
}

/* --- 8. Scanner UI --- */
.scanner-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px);
    z-index: 10000; flex-direction: column; align-items: center; justify-content: center;
}
.scanner-box {
    width: 320px; max-width: 90vw; aspect-ratio: 1/1;
    background: #fff; border: 4px solid var(--primary); border-radius: 20px;
    position: relative; overflow: hidden;
}
.scanner-box::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
    background: var(--primary); animation: scanMove 2s infinite linear;
}
@keyframes scanMove { 0%, 100% { top: 0; } 50% { top: 100%; } }

/* --- 9. Global Mobile Responsive (รวมไว้ที่เดียวท้ายไฟล์) --- */
@media (max-width: 768px) {
    :root { --nav-height: 56px; }
    header { padding: 60px 15px 80px; }
    .hero h1 { font-size: 1.8rem; }
    .tool-card-container { margin: -40px auto 20px; padding: 20px 15px; }
    
    .grid-2-col {
        gap: 12px;
        grid-template-columns: 1fr !important;
    }

    .seo-content {
        width: calc(100% - 30px) !important;
        padding: 40px 25px !important;
        margin: 30px auto !important;
        border-radius: 20px;
    }

    .seo-inner h2 {
        font-size: 1.3rem !important;
    }

    .seo-content ul {
        grid-template-columns: 1fr !important;
    }

    .footer-links { gap: 15px; }
}
/* --- 10. ITKB Signature: Glow & Hover Effects --- */
.glow-text {
    display: inline-block;
    /* ปรับ transition ให้รองรับทั้งการขยับ และการค่อยๆ ปรากฏตัว */
    transition: 
        transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        text-shadow 0.4s ease,
        opacity 0.5s ease-out,
        color 0.4s ease;
    cursor: default;
    position: relative;
    z-index: 1;
}

/* เอฟเฟกต์ตอน Hover */
.glow-text:hover {
    transform: scale(1.1) translateY(-5px);
    color: #ffffff !important;
    text-shadow: 
        0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px var(--primary),
        0 0 40px var(--header-mid);
}

/* --- 11. i18n Flash Prevention (ปรับปรุงใหม่) --- */
[data-i18n] {
    opacity: 0;
    transition: opacity 0.5s ease-in;
    /* เอา transition ออกจากตรงนี้ เพื่อไปใส่ในคลาสหลักของแต่ละตัวแทน */
}

[data-i18n].i18n-loaded {
    opacity: 1 !important;
}

/* พิเศษ: สำหรับตัวหนังสือที่มีทั้ง i18n และ glow-text */
.glow-text[data-i18n] {
    /* ให้มันเตรียมตัวขยับได้เลยตั้งแต่ตอน opacity 0 */
    will-change: transform, opacity;
}

/* style-global.css */

/* 1. คุมหน้าตาพื้นฐานของ Input ตัวเลข */
.styled-input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}

/* 2. ลบลูกศร Spinner สำหรับคลาสที่กำหนด */
.styled-input::-webkit-outer-spin-button,
.styled-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}