@import url("variables.css?v=20260701a");
:root{--public-nav-bg:#101720;--public-nav-card:var(--menu-background);--public-nav-text:var(--secondary-color);--public-nav-line:var(--menu-border);--public-nav-orange:var(--primary-color);--public-nav-orange-dark:#d94700}

/* Shared public navigation design: legacy pages, content pages and SEO area pages. */
.art-nav,.nav{background:var(--public-nav-bg)!important;border:0!important}
.art-nav .art-hmenu>li>a,.site-head nav>a,.site-head .content-utility>summary,.nav-links>a,.utility-area-menu>a{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;height:46px!important;min-height:46px!important;padding:6px 9px!important;overflow:hidden!important;color:var(--public-nav-text)!important;background:linear-gradient(180deg,#fff,#dcd9cd)!important;border:1px solid var(--public-nav-line)!important;border-radius:8px!important;box-shadow:0 2px 5px rgba(0,0,0,.16)!important;font:700 13px/1.2 "Leelawadee UI",Tahoma,Arial,sans-serif!important;text-align:center!important;text-decoration:none!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.art-nav .art-hmenu>li>a:hover,.art-nav .art-hmenu>li>a.active,.site-head nav>a:hover,.site-head nav>a.active,.site-head .content-utility[open]>summary,.nav-links>a:hover,.nav-links>a.active,.utility-area-menu>a:hover{color:#fff!important;background:linear-gradient(135deg,#ff711c,var(--public-nav-orange))!important;border-color:#ff8d49!important}
.art-nav .art-hmenu>li.online-repair-menu>a,.site-head nav>a.public-online-cta,.nav-links>a.public-online-cta{color:#fff!important;background:linear-gradient(135deg,#ff711c,var(--public-nav-orange-dark))!important;border-color:#ff8d49!important;box-shadow:0 5px 14px rgba(244,90,11,.3)!important}
.art-nav .menu-icon,.site-head nav>a>img,.nav-links>a>img{flex:0 0 22px!important;width:22px!important;height:22px!important;object-fit:contain!important}

/* Every desktop family uses the same eight-slot rhythm. */
@media(min-width:901px){.art-nav .art-hmenu{display:grid!important;grid-template-columns:90px 105px 150px 145px 100px 70px 155px 80px!important;gap:7px!important;width:100%!important;padding:7px 8px!important}.art-nav .art-hmenu>li{position:relative!important;float:none!important;width:auto!important;margin:0!important}.art-nav .art-hmenu>li.utility-menu{position:relative!important;inset:auto!important;width:auto!important}.art-nav .art-hmenu>li>ul{top:46px!important}}
@media(min-width:801px){.site-head nav{left:14px!important;right:14px!important;bottom:10px!important;display:grid!important;grid-template-columns:90px 105px 150px 145px 100px 70px 155px 80px!important;gap:7px!important;padding:7px 0!important}.site-head .content-utility{position:relative!important;inset:auto!important;width:auto!important;height:46px!important}.site-head .content-utility>summary{width:100%!important}.site-head .content-utility>div{top:46px!important}}
@media(min-width:681px){.nav-inner{width:min(1000px,100%)!important;padding:7px 8px!important}.nav-links{position:relative!important;display:grid!important;grid-template-columns:90px 105px 150px 145px 100px 70px 155px 80px!important;gap:7px!important;padding:0!important}.utility-area-menu{position:relative!important;inset:auto!important;width:auto!important}.utility-area-menu>a{width:100%!important}.utility-area-menu ul{top:46px!important}}

/* Dropdowns share one visual language. */
.art-nav .art-hmenu ul,.site-head .content-utility>div,.utility-area-menu ul{z-index:200!important;width:240px!important;max-height:70vh!important;padding:9px!important;overflow:auto!important;background:#18212b!important;border:1px solid #394654!important;border-radius:0 0 10px 10px!important;box-shadow:0 14px 30px rgba(0,0,0,.35)!important}
.art-nav .art-hmenu ul a,.site-head .content-utility>div a,.utility-area-menu ul a{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important;width:100%!important;min-height:43px!important;margin:0 0 5px!important;padding:9px 12px!important;color:#1c222a!important;background:#fff!important;border:0!important;border-radius:7px!important;font:700 13px/1.25 "Leelawadee UI",Tahoma,Arial,sans-serif!important;text-decoration:none!important;white-space:normal!important}
.art-nav .art-hmenu ul a:hover,.site-head .content-utility>div a:hover,.utility-area-menu ul a:hover{color:#fff!important;background:var(--public-nav-orange)!important}

/* Mobile menus are full-width, touch friendly and keep the CTA obvious. */
@media(max-width:900px){.art-nav{padding:0!important}.art-nav .art-hmenu>li>a{justify-content:flex-start!important;border-radius:7px!important}.art-nav .art-hmenu>li.online-repair-menu>a{justify-content:center!important}}
@media(max-width:800px){.site-head nav{padding:0!important}.site-head .content-utility>summary{width:50px!important}.site-head .content-utility>div{right:0!important;width:min(280px,calc(100vw - 24px))!important}}
@media(max-width:680px){.nav-inner{padding:7px 10px!important}.nav-links{gap:5px!important;padding:0!important}.nav-links>a,.utility-area-menu ul a{justify-content:flex-start!important;border-radius:7px!important}.nav-links>a.public-online-cta{justify-content:center!important}.utility-area-menu ul{width:100%!important;max-height:none!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}}

/* Two-column services mega menu */
.art-nav .service-mega-menu{position:relative!important;overflow:visible!important}
.art-nav .service-mega-menu>[data-service-toggle]{position:relative!important;padding-right:22px!important}
.service-caret{position:absolute;right:7px;top:50%;font-size:15px;line-height:1;transform:translateY(-56%);transition:transform .22s ease}
.service-mega-menu.is-dropdown-open .service-caret,.service-mega-menu:focus-within .service-caret{transform:translateY(-42%) rotate(180deg)}
.art-nav .mega-dropdown{box-sizing:border-box!important;position:absolute;z-index:500;top:100%;left:0;width:min(600px,calc(100vw - 32px));padding:15px;background:#fffdfb;border:1px solid #eee;border-radius:0 0 16px 16px;box-shadow:0 18px 45px rgba(0,0,0,.18);color:#17191d;font-family:"Leelawadee UI",Tahoma,Arial,sans-serif;text-align:left;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.985);transform-origin:top left;transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.service-mega-menu.is-dropdown-open>.mega-dropdown,.service-mega-menu:focus-within>.mega-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.dropdown-title{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 3px 13px;padding:0 2px 13px;border-bottom:1px solid #eee}
.dropdown-title>span{color:#12151a;font-size:18px;font-weight:850;line-height:1.2}
.dropdown-title>small{color:#7b818a;font-size:12px;font-weight:500}
.dropdown-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(60px,auto));gap:7px 11px}
.dropdown-grid>.dropdown-link:nth-child(1){grid-column:1;grid-row:1}.dropdown-grid>.dropdown-link:nth-child(2){grid-column:1;grid-row:2}.dropdown-grid>.dropdown-link:nth-child(3){grid-column:1;grid-row:3}.dropdown-grid>.dropdown-link:nth-child(4){grid-column:1;grid-row:4}.dropdown-grid>.dropdown-link:nth-child(5){grid-column:2;grid-row:1}.dropdown-grid>.dropdown-link:nth-child(6){grid-column:2;grid-row:2}.dropdown-grid>.dropdown-link:nth-child(7){grid-column:2;grid-row:3}.dropdown-grid>.dropdown-link:nth-child(8){grid-column:2;grid-row:4}
.art-nav .dropdown-link{box-sizing:border-box!important;display:grid!important;grid-template-columns:40px minmax(0,1fr) 18px;align-items:center;gap:9px;min-width:0!important;min-height:60px!important;margin:0!important;padding:8px 10px!important;color:#20242a!important;background:transparent!important;border:1px solid transparent!important;border-radius:11px!important;box-shadow:none!important;text-align:left!important;text-decoration:none!important;white-space:normal!important;transition:background-color .18s ease,border-color .18s ease,transform .18s ease!important}
.art-nav .dropdown-link:hover,.art-nav .dropdown-link:focus-visible{color:#16191e!important;background:#fff3e8!important;border-color:#ffd9bd!important;outline:0!important;transform:translateX(4px)}
.dropdown-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#f45a0b;background:#fff0e4;font-size:21px;font-weight:900;line-height:1}
.dropdown-content,.dropdown-label,.dropdown-desc{display:block;min-width:0}
.dropdown-label{color:#171a1f;font-size:14px;font-weight:800;line-height:1.3}
.dropdown-desc{margin-top:3px;color:#747b85;font-size:11.5px;font-weight:500;line-height:1.35}
.dropdown-arrow{color:#f45a0b;font-size:18px;font-weight:800;opacity:.45;transform:translateX(-3px);transition:opacity .18s ease,transform .18s ease}
.dropdown-link:hover .dropdown-arrow,.dropdown-link:focus-visible .dropdown-arrow{opacity:1;transform:translateX(0)}
.dropdown-footer{margin-top:13px;padding:13px 3px 0;border-top:1px solid #eee}
.art-nav .dropdown-footer>a{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;width:auto!important;min-height:30px!important;margin:0!important;padding:2px 5px!important;color:#d94a05!important;background:transparent!important;border:0!important;border-radius:6px!important;box-shadow:none!important;font:800 13px/1.3 "Leelawadee UI",Tahoma,Arial,sans-serif!important;text-decoration:none!important;white-space:nowrap!important}
.art-nav .dropdown-footer>a:hover,.art-nav .dropdown-footer>a:focus-visible{color:#a73500!important;background:#fff3e8!important;outline:0!important}

@media(min-width:901px){.service-mega-menu:hover>.mega-dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}}
@media(max-width:900px){.art-nav .service-mega-menu>[data-service-toggle]{justify-content:flex-start!important}.service-caret{right:14px}.art-nav .mega-dropdown{position:static!important;width:100%!important;max-width:100%!important;max-height:0;padding:0 12px!important;overflow:hidden!important;border:0!important;border-radius:12px!important;box-shadow:none!important;opacity:0;visibility:hidden;transform:none!important;transition:max-height .3s ease,opacity .2s ease,padding .3s ease,margin .3s ease!important}.service-mega-menu:not(.is-dropdown-open):focus-within>.mega-dropdown{max-height:0!important;margin-top:0!important;padding:0 12px!important;border:0!important;box-shadow:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}.service-mega-menu.is-dropdown-open>.mega-dropdown{max-height:950px;margin-top:7px;padding:15px 12px!important;background:#fffdfb!important;border:1px solid #eee!important;box-shadow:0 10px 24px rgba(0,0,0,.13)!important;opacity:1;visibility:visible;overflow:auto!important;pointer-events:auto!important}.dropdown-title{display:block;margin-bottom:10px;padding-bottom:10px}.dropdown-title>span,.dropdown-title>small{display:block}.dropdown-title>small{margin-top:3px}.dropdown-grid{grid-template-columns:1fr;grid-template-rows:none;gap:6px}.dropdown-grid>.dropdown-link:nth-child(n){grid-column:auto;grid-row:auto}.art-nav .dropdown-link{min-height:62px!important}.dropdown-footer{margin-top:10px;padding-top:10px}.art-nav .dropdown-footer>a{justify-content:center!important;min-height:42px!important;background:#fff3e8!important}}
@media(max-width:420px){.art-nav .mega-dropdown{width:100%!important}.dropdown-title>span{font-size:16px}.dropdown-desc{font-size:11px}.art-nav .dropdown-link{grid-template-columns:36px minmax(0,1fr) 16px;padding:8px!important}.dropdown-icon{width:36px;height:36px;font-size:18px}}
@media(prefers-reduced-motion:reduce){.art-nav .mega-dropdown,.art-nav .dropdown-link,.service-caret,.dropdown-arrow{transition:none!important}}

/* Shared menu component layer for legacy, content, SEO-area and admin navigation. */
:where(.art-nav,.site-head,.nav,.detail-seo-head,.sidebar,.admin-footer,.art-footer,.footer) :where(a,button,summary){font-family:var(--menu-font)}
.art-nav .art-hmenu>li>a,.site-head nav>a,.site-head .content-utility>summary,.nav-links>a,.utility-area-menu>a,.detail-seo-head>a{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:var(--icon-gap)!important;height:var(--menu-height)!important;min-height:var(--menu-height)!important;padding:var(--menu-padding)!important;color:var(--secondary-color)!important;background:var(--menu-background)!important;border:1px solid var(--menu-border)!important;border-radius:var(--menu-radius)!important;box-shadow:var(--card-shadow)!important;font:var(--menu-font-weight) var(--menu-font-size)/1.25 var(--menu-font)!important;text-decoration:none!important;white-space:nowrap!important;transition:background-color var(--transition-speed),color var(--transition-speed),border-color var(--transition-speed),transform var(--transition-speed),box-shadow var(--transition-speed)!important}
.art-nav .art-hmenu>li>a:hover,.art-nav .art-hmenu>li>a:focus-visible,.site-head nav>a:hover,.site-head nav>a:focus-visible,.site-head .content-utility>summary:hover,.site-head .content-utility>summary:focus-visible,.nav-links>a:hover,.nav-links>a:focus-visible,.utility-area-menu>a:hover,.utility-area-menu>a:focus-visible,.detail-seo-head>a:hover,.detail-seo-head>a:focus-visible{color:var(--secondary-color)!important;background:var(--hover-color)!important;border-color:#ffd7b8!important;outline:0!important;transform:translateX(4px)}
.art-nav .art-hmenu>li>a.active,.art-nav .art-hmenu>li.online-repair-menu>a,.site-head nav>a.active,.site-head nav>a.public-online-cta,.nav-links>a.active,.nav-links>a.public-online-cta,.detail-seo-head>a.active{color:var(--active-text)!important;background:var(--active-color)!important;border-color:var(--active-color)!important}
.art-nav .menu-icon,.site-head nav>a>img,.site-head .content-utility img,.nav-links>a>img,.utility-area-menu img{flex:0 0 var(--icon-size)!important;width:var(--icon-size)!important;height:var(--icon-size)!important;object-fit:contain!important}
html body .art-nav .art-hmenu>li>a>img.menu-icon,html body .site-head nav>a>img,html body .nav .nav-links>a>img.menu-icon{flex-basis:var(--icon-size)!important;width:var(--icon-size)!important;min-width:var(--icon-size)!important;max-width:var(--icon-size)!important;height:var(--icon-size)!important;min-height:var(--icon-size)!important;max-height:var(--icon-size)!important}
.repair-menu-link>a:before,.faq-menu-link>a:before,.online-repair-menu>a:before,.nav-links>a:not(:has(>img)):before,.site-head nav>a:not(:has(>img)):before,.detail-seo-head>a:before{display:inline-grid;place-items:center;flex:0 0 var(--icon-size);width:var(--icon-size);height:var(--icon-size);color:var(--primary-color);font-size:var(--icon-size);line-height:1}
.repair-menu-link>a:before,.nav-links>a[href*="repair-cases"]:before,.site-head nav>a[href*="repair-cases"]:before{content:"▣"}.faq-menu-link>a:before,.nav-links>a[href*="faq"]:before,.site-head nav>a[href*="faq"]:before{content:"?"}.online-repair-menu>a:before,.nav-links>a.public-online-cta:before,.site-head nav>a.public-online-cta:before{content:"↗";color:currentColor}.nav-links>a[href*="บทความ"]:before,.site-head nav>a[href*="บทความ"]:before{content:"▤"}.detail-seo-head>a:before{content:"•"}
@media(min-width:681px){.art-nav .art-hmenu>li.frontend-dropdown>ul,.art-nav .utility-menu>ul,.site-head .content-utility>div,.utility-area-menu>ul{box-sizing:border-box!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--menu-gap)!important;width:min(var(--dropdown-width),calc(100vw - 32px))!important;max-height:70vh!important;padding:16px!important;overflow:auto!important;background:var(--menu-background)!important;border:1px solid var(--menu-border)!important;border-radius:var(--menu-radius)!important;box-shadow:var(--menu-shadow)!important}.art-nav .utility-menu>ul,.site-head .content-utility>div,.utility-area-menu>ul{right:0!important;left:auto!important}.art-nav .art-hmenu>li.frontend-dropdown>ul:before,.art-nav .utility-menu>ul:before{content:"เมนูเพิ่มเติม"!important;display:block!important;grid-column:1/-1!important;position:static!important;padding:0 2px 12px!important;color:var(--secondary-color)!important;border:0!important;border-bottom:1px solid var(--menu-border)!important;font:var(--dropdown-title-weight) var(--dropdown-title-size)/1.3 var(--menu-font)!important}.art-nav .art-hmenu>li.frontend-dropdown>ul:after,.art-nav .utility-menu>ul:after{content:"เลือกเมนูที่ต้องการ";display:block;grid-column:1/-1;padding:11px 2px 0;color:#777;border-top:1px solid var(--menu-border);font:400 13px/1.3 var(--menu-font)}}
.art-nav .art-hmenu ul a,.site-head .content-utility>div a,.utility-area-menu ul a{box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:var(--icon-gap)!important;min-height:var(--dropdown-item-height)!important;height:auto!important;margin:0!important;padding:12px 16px!important;color:var(--secondary-color)!important;background:var(--menu-background)!important;border:1px solid var(--menu-border)!important;border-radius:var(--menu-radius)!important;box-shadow:none!important;font:var(--menu-font-weight) var(--menu-font-size)/1.3 var(--menu-font)!important;text-decoration:none!important;white-space:normal!important;transition:background-color var(--transition-speed),color var(--transition-speed),transform var(--transition-speed)!important}
.art-nav .art-hmenu ul a:hover,.art-nav .art-hmenu ul a:focus-visible,.site-head .content-utility>div a:hover,.site-head .content-utility>div a:focus-visible,.utility-area-menu ul a:hover,.utility-area-menu ul a:focus-visible{color:var(--secondary-color)!important;background:var(--hover-color)!important;outline:0!important;transform:translateX(4px)}
.dropdown-title>span{font:var(--dropdown-title-weight) var(--dropdown-title-size)/1.25 var(--menu-font)!important}.dropdown-label{font:var(--dropdown-label-weight) var(--dropdown-label-size)/1.3 var(--menu-font)!important}.dropdown-desc{font:var(--dropdown-desc-weight) var(--dropdown-desc-size)/1.4 var(--menu-font)!important}.dropdown-icon{color:var(--primary-color);background:var(--hover-color)}.art-nav .mega-dropdown{width:min(var(--dropdown-width),calc(100vw - 32px));border-color:var(--menu-border);border-radius:var(--menu-radius);box-shadow:var(--menu-shadow)}
.sidebar-nav a,.sidebar-logout button{box-sizing:border-box!important;display:flex!important;align-items:center!important;gap:var(--icon-gap)!important;min-height:var(--menu-height)!important;margin:0 0 var(--menu-gap)!important;padding:var(--menu-padding)!important;border:1px solid transparent!important;border-radius:var(--menu-radius)!important;font:var(--menu-font-weight) var(--sidebar-menu-size)/1.25 var(--menu-font)!important;transition:background-color var(--transition-speed),color var(--transition-speed),transform var(--transition-speed)!important}.sidebar-nav a>span,.sidebar-logout button>span{flex:0 0 var(--icon-size)!important;width:var(--icon-size)!important;font-size:var(--icon-size)!important}.sidebar-nav a:hover,.sidebar-logout button:hover{transform:translateX(4px)!important}.sidebar-nav a.active{color:var(--active-text)!important;background:var(--active-color)!important;border-color:var(--active-color)!important}
.btn,.button,.menu-button{box-sizing:border-box;min-height:var(--mobile-menu-height);padding:12px 18px;border-radius:var(--menu-radius);font:var(--menu-font-weight) var(--menu-font-size)/1.25 var(--menu-font);transition:background-color var(--transition-speed),color var(--transition-speed),border-color var(--transition-speed),transform var(--transition-speed),box-shadow var(--transition-speed)}.btn:hover,.button:hover,.menu-button:hover{transform:translateY(-1px)}.badge,.menu-badge{border-radius:999px;font-family:var(--menu-font);font-weight:600}
.home-mobile-actions a,.mobile-bottom-actions a,.bottom-actions a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:var(--mobile-menu-height);padding:12px 14px;border-radius:var(--menu-radius);font:var(--menu-font-weight) var(--menu-font-size)/1.2 var(--menu-font)}
.art-footer a,footer a,.footer a,.admin-footer a{font:600 var(--footer-menu-size)/1.4 var(--menu-font);transition:color var(--transition-speed),background-color var(--transition-speed),transform var(--transition-speed)}
@media(max-width:900px){.art-nav .art-hmenu>li>a,.site-head nav>a,.site-head .content-utility>summary,.nav-links>a,.utility-area-menu>a,.detail-seo-head>a{justify-content:flex-start!important;height:var(--mobile-menu-height)!important;min-height:var(--mobile-menu-height)!important;padding:12px 16px!important;font-size:var(--menu-font-size)!important}.art-nav .art-hmenu,.nav-links{gap:var(--menu-gap)!important}.art-nav .art-hmenu>li.frontend-dropdown>ul,.art-nav .utility-menu>ul,.site-head .content-utility>div,.utility-area-menu>ul{grid-template-columns:1fr!important;width:100%!important;padding:10px!important;border-radius:var(--menu-radius)!important}.art-nav .art-hmenu ul a,.site-head .content-utility>div a,.utility-area-menu ul a{min-height:var(--mobile-menu-height)!important;padding:12px 16px!important}.sidebar-nav a,.sidebar-logout button{min-height:var(--mobile-menu-height)!important}.art-nav .mega-dropdown{width:100%!important}.dropdown-grid{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){:where(.art-nav,.site-head,.nav,.sidebar) :where(a,button,summary),.btn,.button{transition:none!important}}
.sidebar-nav a,.sidebar-logout button{height:var(--menu-height)!important;min-height:var(--menu-height)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.art-nav .dropdown-link{height:var(--dropdown-item-height)!important;min-height:var(--dropdown-item-height)!important;padding:6px 10px!important}.dropdown-icon{font-size:var(--icon-size)!important}.dropdown-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:681px){.dropdown-grid,.art-nav .art-hmenu>li.frontend-dropdown>ul,.art-nav .utility-menu>ul,.site-head .content-utility>div,.utility-area-menu>ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}.art-nav .mega-dropdown{width:min(var(--dropdown-width),calc(100vw - 32px))!important}}
@media(max-width:900px){.sidebar-nav a,.sidebar-logout button{height:var(--mobile-menu-height)!important;min-height:var(--mobile-menu-height)!important}}
@media(min-width:681px){html body .art-nav .art-hmenu .service-mega-menu>.mega-dropdown{width:min(var(--dropdown-width),calc(100vw - 32px))!important}html body .art-nav .art-hmenu .service-mega-menu>.mega-dropdown>.dropdown-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}