/* Skytrain Dental — header (scoped under #sk-header) */
/* Sticky by default — this is the mobile/phone behaviour the client wants kept.
   On tablet and desktop (>=768px) the header scrolls away with the page instead
   (override in the media query below). */
#sk-header.sk-header{position:sticky;top:0;z-index:200;background:#ffffff}
@media(min-width:768px){#sk-header.sk-header{position:static}}
#sk-header *{box-sizing:border-box}
#sk-header a{text-decoration:none}
/* force Noto Sans Thai across header (menu/buttons) — double-id specificity to beat theme + Custom CSS !important */
#sk-header#sk-header,#sk-header#sk-header a,#sk-header#sk-header span,#sk-header#sk-header li,#sk-header#sk-header ul,#sk-header#sk-header button,#sk-header#sk-header div,#sk-header#sk-header b,#sk-header#sk-header strong{font-family:'Noto Sans Thai',sans-serif!important}

/* utility bar (blue) */
#sk-header .sk-utilbar{background:#15A8CB;color:#ffffff;font-size:13px}
#sk-header .sk-util-inner{max-width:1240px;margin:0 auto;padding:8px 32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
#sk-header .sk-util-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
#sk-header .sk-util-open{display:flex;align-items:center;gap:7px}
#sk-header .sk-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(255,255,255,.45);display:inline-block}
#sk-header .sk-util-branches{opacity:.55}
#sk-header .sk-util-right{display:flex;align-items:center;gap:18px}
#sk-header .sk-util-phone b{color:#ffffff}

/* Language switcher in the top bar (TH / EN text). */
#sk-header .sk-util-lang{display:flex;align-items:center;margin:0;padding:0;list-style:none}
#sk-header .sk-util-lang li{display:flex;align-items:center}
#sk-header .sk-util-lang li + li::before{content:"";width:1px;height:12px;background:rgba(255,255,255,.5);margin:0 10px}
#sk-header .sk-util-lang a{color:#fff;text-transform:uppercase;font-size:13px;font-weight:600;letter-spacing:.04em;line-height:1;opacity:.7;text-decoration:none}
#sk-header .sk-util-lang a:hover{opacity:1}
#sk-header .sk-util-lang .current-lang>a,#sk-header .sk-util-lang .current-lang a{opacity:1;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}

/* The language switcher now lives in the top bar — hide Polylang's copy in the
   main navigation (Max Mega Menu desktop list + our plain mobile/desktop menus). */
#sk-header .mega-lang-item,
#sk-header .sk-menu .lang-item,
#sk-header .sk-mmenu .lang-item{display:none!important}
/* Polylang language switcher in util bar (pll_the_languages outputs bare <li>, we wrap in <ul class="sk-lang">) */
#sk-header ul.sk-lang{list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center}
#sk-header ul.sk-lang li{margin:0;list-style:none}
#sk-header ul.sk-lang a{display:inline-block;color:#CFE9F1;font-weight:600;font-size:12.5px;line-height:1;padding:5px 11px;border-radius:999px}
#sk-header ul.sk-lang .current-lang a,#sk-header ul.sk-lang a:hover{background:#17B0D4;color:#fff}

/* main nav row */
#sk-header .sk-nav-inner{max-width:1240px;margin:0 auto;padding:7px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px;background:#ffffff;position:relative}
/* the header is sticky, so once the page scrolls it needs an edge again — a soft shadow only
   while scrolled, instead of a permanent line sitting under the menu at rest */
#sk-header.is-scrolled .sk-nav-inner{box-shadow:0 6px 18px rgba(11,58,71,.08)}
#sk-header .sk-logo{height:52px;width:auto;display:block}

/* desktop menu */
#sk-header .sk-nav .sk-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
#sk-header .sk-nav .sk-menu > li{position:relative}
#sk-header .sk-nav .sk-menu > li > a{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;color:#0B3A47;font-size:14.5px;font-weight:500;padding:20px 12px}
#sk-header .sk-nav .sk-menu > li:hover > a{color:#17B0D4}
#sk-header .sk-nav .sk-menu .sub-menu{list-style:none;margin:0;padding:8px;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid #E4EDF0;border-radius:14px;box-shadow:0 18px 40px rgba(11,58,71,.14);display:none;z-index:60}
#sk-header .sk-nav .sk-menu li:hover > .sub-menu{display:block}
#sk-header .sk-nav .sk-menu .sub-menu li{position:relative}
#sk-header .sk-nav .sk-menu .sub-menu a{display:block;padding:9px 14px;border-radius:9px;font-size:14px;color:#41606B;white-space:nowrap}
#sk-header .sk-nav .sk-menu .sub-menu a:hover{background:#F1F9FC;color:#0E8CAE}
#sk-header .sk-nav .sk-menu .sub-menu .sub-menu{top:0;left:100%}

/* EN "Branches" mega submenu → 2 columns, to match the Thai menu.
   Max Mega Menu renders the TH branches item (menu-item-1514) as a 2-column grid
   but the EN item (menu-item-15215) as a flat 1-column list. This forces the EN
   panel to wrap its 14 branch links into two columns. The selector is prefixed
   with MMM's own wrapper ids (#mega-menu-wrap-primary_menu #mega-menu-primary_menu)
   so it out-specifies MMM's built-in rules. NOTE: keyed to the EN branches menu
   item id 15215 — if that menu is rebuilt and the id changes, update it here. */
#mega-menu-wrap-primary_menu #mega-menu-primary_menu li#mega-menu-item-15215 > ul.mega-sub-menu{
	display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;min-width:380px!important;width:auto!important;
}
#mega-menu-wrap-primary_menu #mega-menu-primary_menu li#mega-menu-item-15215 > ul.mega-sub-menu > li.mega-menu-item{
	flex:0 0 50%!important;max-width:50%!important;width:50%!important;box-sizing:border-box!important;
}

/* right side */
#sk-header .sk-nav-right{display:flex;align-items:center;gap:12px}
#sk-header .sk-line-cta{display:inline-flex;align-items:center;gap:8px;background:#06C755;color:#fff;font-weight:600;font-size:14px;padding:10px 18px;border-radius:999px;box-shadow:0 6px 16px rgba(6,199,85,.25)}
#sk-header .sk-line-cta:hover{filter:brightness(1.05)}
#sk-header .sk-line-ico{font-size:15px}

/* hamburger (hidden on desktop) */
#sk-header .sk-burger{display:none;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:42px;height:38px;background:none;border:1px solid #E4EDF0;border-radius:10px;cursor:pointer}
#sk-header .sk-burger span{display:block;width:20px;height:2px;background:#0B3A47;border-radius:2px;transition:.2s}

/* mobile menu panel */
#sk-header .sk-mobile{display:none;border-top:1px solid #E4EDF0;background:#fff}
#sk-header .sk-mobile .sk-mmenu{list-style:none;margin:0;padding:0}
#sk-header .sk-mobile .sk-mmenu li{margin:0}
#sk-header .sk-mobile .sk-mmenu a{display:block;padding:13px 32px;border-bottom:1px solid #F0F5F7;color:#0B3A47;font-weight:500}
/* parent items: show a caret to hint they expand */
#sk-header .sk-mobile .sk-mmenu .menu-item-has-children > a{position:relative}
#sk-header .sk-mobile .sk-mmenu .menu-item-has-children > a::after{content:'\25BE';position:absolute;right:32px;top:50%;transform:translateY(-50%);color:#9DB4BC;font-size:12px}
/* submenus start collapsed; header.js toggles them open on tap */
#sk-header .sk-mobile .sk-mmenu .sub-menu{list-style:none;margin:0;padding:0;display:none}
#sk-header .sk-mobile .sk-mmenu .sub-menu a{padding-left:48px;font-size:13.5px;color:#5B7680;font-weight:400}

@media(max-width:960px){
	#sk-header .sk-nav{display:none}
	#sk-header .sk-burger{display:flex}
	#sk-header.sk-open .sk-mobile{display:block}
	#sk-header .sk-util-branches{display:none}
}
/* Phones: keep the top bar's opening hours and phone on ONE line, and stop the
   LINE button wrapping to two lines (which made it look oversized). */
@media(max-width:600px){
	#sk-header .sk-logo{height:44px}
	#sk-header .sk-utilbar{font-size:12px}
	#sk-header .sk-util-inner{flex-wrap:nowrap;gap:10px;padding:8px 16px}
	#sk-header .sk-util-left{flex-wrap:nowrap}
	#sk-header .sk-util-open,#sk-header .sk-util-phone{white-space:nowrap}
	#sk-header .sk-line-cta{font-size:12.5px;padding:8px 14px;white-space:nowrap}
	#sk-header .sk-line-ico{font-size:13px}
}

/* Very narrow screens (e.g. Galaxy Z Fold cover display, ~344px): tighten the
   header so the LINE button + menu button don't run past the edge and cause the
   whole page to scroll horizontally. */
@media(max-width:400px){
	#sk-header .sk-nav-inner{padding-left:16px;padding-right:16px}
	#sk-header .sk-nav-right{gap:8px}
	#sk-header .sk-line-cta{padding:8px 12px}
}

/* An image-lightbox plugin (.tolb-holder) renders a fixed-position holder that
   can be wider than a narrow viewport — cap it so it can never trigger
   horizontal scroll on any page. */
.tolb-holder{max-width:100vw;width:100%}

/* ---------------------------------------------------------------------------
   Disable the broken Sygnoos "Popup Builder" promo popup (id 14067). It renders
   its promo as a position:fixed background image (`img.sgpb-background-image-14067`)
   that stays on screen after the popup dialog closes, while its own close (X)
   button lands off-screen — so visitors get a full-screen promo they cannot
   dismiss. We suppress only THIS popup's front-end artifacts (scoped to its id),
   so any other popup keeps working. The popup still exists in Popup Builder; to
   show a promo again, set up a fresh, responsive one there — this one is broken. */
.sgpb-background-image-14067,
.sgpb-popup-overlay-14067,
.sgpb-main-popup-data-container-14067{display:none!important}

/* ============================================================
   Services mega menu — theme-native (replaces Max Mega Menu for
   the first nav item). header.js adds .sk-has-svcmega to that item
   and toggles .is-open on #sk-svcmega.
   ============================================================ */
/* suppress MMM's own dropdown for the Services item */
#sk-header .sk-has-svcmega > .mega-sub-menu,
#sk-header .sk-has-svcmega .mega-sub-menu{display:none!important}

#sk-header .sk-svcmega{position:absolute;top:100%;left:0;right:0;z-index:300;background:#fff;border-radius:0 0 18px 18px;border-top:1px solid #EAF2F5;box-shadow:0 24px 44px rgba(11,58,71,.13);padding:26px 32px 30px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .16s ease,transform .16s ease,visibility .16s;pointer-events:none}
#sk-header .sk-svcmega.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
#sk-header .sk-svcmega-in{display:grid;grid-template-columns:repeat(5,1fr);gap:26px;max-width:1180px;margin:0 auto}
#sk-header .sk-svcmega-col{min-width:0}
#sk-header .sk-svcmega-h{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:700;color:#0B3A47;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid #EEF4F6}
#sk-header .sk-svcmega-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
#sk-header .sk-svcmega-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
#sk-header .sk-svcmega-list a{display:block;padding:7px 10px;border-radius:9px;font-size:14.5px;color:#3D5560;transition:background .12s,color .12s}
#sk-header .sk-svcmega-list a:hover{background:#F1F8FB;color:#0E8CAE}
/* desktop only — mobile uses the burger menu */
@media(max-width:960px){#sk-header .sk-svcmega{display:none!important}}

/* ============================================================
   Restyle Max Mega Menu's dropdowns (all nav items EXCEPT Services,
   whose dropdown is theme-native .sk-svcmega) so they match it —
   white rounded panel, same link size/colour/hover — instead of
   MMM's default grey #F1F1F1 / 16px #555. High-specificity + !important
   to out-rank the plugin's own inline theme CSS.
   ============================================================ */
/* white panel = ONLY the top-level dropdown (direct sub-menu of a nav item) */
#mega-menu-wrap-primary_menu #mega-menu-primary_menu > li.mega-menu-item > ul.mega-sub-menu{
	background:#fff!important;border:1px solid #E4EDF0!important;border-radius:16px!important;
	box-shadow:0 18px 40px rgba(11,58,71,.14)!important;padding:10px!important;
}
/* nested sub-menus (mega rows/columns, e.g. the Branches grid) stay transparent —
   no nested boxes/shadows/padding stacking inside the panel */
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu ul.mega-sub-menu{
	background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;
}
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu li.mega-menu-item,
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu li.mega-menu-column,
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu li.mega-menu-row{background:transparent!important}
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link{
	font-family:'Noto Sans Thai',sans-serif!important;font-size:14.5px!important;font-weight:500!important;
	color:#3D5560!important;background:transparent!important;border-radius:9px!important;
	padding:9px 14px!important;line-height:1.5!important;
}
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-primary_menu #mega-menu-primary_menu ul.mega-sub-menu li.mega-menu-item.mega-toggle-on > a.mega-menu-link{
	background:#F1F8FB!important;color:#0E8CAE!important;
}