/* ==========================================================
   DailyWork Header Settings
   ==========================================================
   แก้ไข Header จากไฟล์นี้ไฟล์เดียว

   ค่าที่แก้บ่อยที่สุดอยู่ใน :root ด้านล่าง
   - ขนาดตัวอักษรเมนู Desktop
   - ช่องว่างระหว่างเมนู
   - ขนาดตัวอักษร Tablet
   - ขนาดปุ่ม Login

   หมายเหตุ: ไฟล์นี้ถูกโหลดเป็น CSS ตัวสุดท้ายของทุกหน้า
   จึงใช้สำหรับ Override CSS เก่าที่กระจายอยู่ใน HTML
   ========================================================== */

:root {
    /* ===== เมนู Desktop: จอ 1200px ขึ้นไป ===== */
    --dw-header-menu-font-size: 15px;     /* ขนาดตัวอักษรเมนู */
    --dw-header-menu-gap: 7px;            /* ช่องว่างระหว่างเมนู */
    --dw-header-menu-font-weight: 500;    /* 400=ปกติ, 500=กลาง, 600=หนา */
    --dw-header-menu-line-height: 1.20;

    /* ===== เมนู Tablet: จอ 901-1199px ===== */
    --dw-header-menu-font-size-tablet: 12.5px;
    --dw-header-menu-gap-tablet: 5px;

    /* ===== ระยะห่างรวมของ Header ===== */
    --dw-header-main-gap: 8px;

    /* ===== ปุ่ม Login ===== */
    --dw-header-login-small-width: 140px;
    --dw-header-login-large-width: 148px;
    --dw-header-login-gap: 6px;

    /* ===== เส้นสีส้มใต้เมนูที่เลือก ===== */
    --dw-header-active-line-width: 28px;
    --dw-header-active-line-height: 3px;
    --dw-header-active-line-bottom: 7px;
}

/* ==========================================================
   Desktop / Laptop
   ========================================================== */
@media (min-width: 1200px) {
    .dwh-page .dwh-header .dwh-container.dwh-header__inner {
        display: flex !important;
        align-items: center !important;
        gap: var(--dw-header-main-gap) !important;
        flex-wrap: nowrap !important;
    }

    .dwh-page .dwh-header .dwh-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        gap: var(--dw-header-menu-gap) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        white-space: nowrap !important;
    }

    /* เมนูปกติ + Hover + Active ใช้ขนาดเท่ากันทั้งหมด ป้องกันข้อความเด้ง */
    .dwh-page .dwh-header .dwh-nav > a,
    .dwh-page .dwh-header .dwh-nav > a:hover,
    .dwh-page .dwh-header .dwh-nav > a:focus,
    .dwh-page .dwh-header .dwh-nav > a:focus-visible,
    .dwh-page .dwh-header .dwh-nav > a:active,
    .dwh-page .dwh-header .dwh-nav > a.is-current,
    .dwh-page .dwh-header .dwh-nav > a.is-active,
    .dwh-page .dwh-header .dwh-nav > a[aria-current="page"] {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        translate: none !important;
        top: auto !important;
        bottom: auto !important;
        font-size: var(--dw-header-menu-font-size) !important;
        font-weight: var(--dw-header-menu-font-weight) !important;
        line-height: var(--dw-header-menu-line-height) !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        box-shadow: none !important;
        background-image: none !important;
        transition: color .15s ease !important;
    }

    .dwh-page .dwh-header .dwh-nav > a:hover,
    .dwh-page .dwh-header .dwh-nav > a:focus-visible,
    .dwh-page .dwh-header .dwh-nav > a.is-current,
    .dwh-page .dwh-header .dwh-nav > a.is-active,
    .dwh-page .dwh-header .dwh-nav > a[aria-current="page"] {
        color: var(--dwh-blue-700) !important;
    }

    .dwh-page .dwh-header .dwh-nav > a.is-current::after,
    .dwh-page .dwh-header .dwh-nav > a.is-active::after,
    .dwh-page .dwh-header .dwh-nav > a[aria-current="page"]::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        bottom: var(--dw-header-active-line-bottom) !important;
        width: var(--dw-header-active-line-width) !important;
        height: var(--dw-header-active-line-height) !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background: #ff8c0d !important;
        pointer-events: none !important;
    }

    .dwh-page .dwh-header .dwh-header__login {
        display: flex !important;
        align-items: center !important;
        gap: var(--dw-header-login-gap) !important;
        margin-left: 2px !important;
        flex: 0 0 auto !important;
    }

    .dwh-page .dwh-header .dwh-login-trigger--small {
        width: var(--dw-header-login-small-width) !important;
        min-width: var(--dw-header-login-small-width) !important;
    }

    .dwh-page .dwh-header .dwh-login-trigger--large {
        width: var(--dw-header-login-large-width) !important;
        min-width: var(--dw-header-login-large-width) !important;
    }
}

/* ==========================================================
   Tablet / Notebook ขนาดเล็ก
   ========================================================== */
@media (min-width: 901px) and (max-width: 1199px) {
    .dwh-page .dwh-header .dwh-header-contact {
        display: none !important;
    }

    .dwh-page .dwh-header .dwh-container.dwh-header__inner {
        gap: 7px !important;
        flex-wrap: nowrap !important;
    }

    .dwh-page .dwh-header .dwh-nav {
        display: flex !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        gap: var(--dw-header-menu-gap-tablet) !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .dwh-page .dwh-header .dwh-nav > a,
    .dwh-page .dwh-header .dwh-nav > a:hover,
    .dwh-page .dwh-header .dwh-nav > a:focus,
    .dwh-page .dwh-header .dwh-nav > a:active,
    .dwh-page .dwh-header .dwh-nav > a.is-current,
    .dwh-page .dwh-header .dwh-nav > a.is-active,
    .dwh-page .dwh-header .dwh-nav > a[aria-current="page"] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        align-self: stretch !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        font-size: var(--dw-header-menu-font-size-tablet) !important;
        font-weight: var(--dw-header-menu-font-weight) !important;
        line-height: var(--dw-header-menu-line-height) !important;
        letter-spacing: -0.02em !important;
        white-space: nowrap !important;
    }
}

/* Mobile ต่ำกว่า 901px ใช้ CSS Mobile เดิมของเว็บไซต์ */