/* Topbar, sticky header, nav, Kiến thức dropdown, mega menu, language, drawer, floating buttons. Ported from prototype/index.html. */

@layer inntek {
	.inntek-topbar{background:var(--inntek-bg-alt);border-bottom:1px solid var(--inntek-line);font-size:13.5px;color:var(--inntek-muted)}
	.inntek-topbar .inntek-container{display:flex;justify-content:space-between;align-items:center;gap:16px;height:38px}
	.inntek-topbar span{display:inline-flex;align-items:center;gap:6px}
	.inntek-topbar .inntek-icon{font-size:17px;color:var(--inntek-brand)}
	.inntek-topbar .inntek-pos-left,.inntek-topbar .inntek-pos-right{display:flex;gap:22px;align-items:center}
	@media (max-width:860px){.inntek-topbar .inntek-pos-right{display:none}}
	@media (max-width:520px){.inntek-topbar .inntek-pos-left>span:nth-child(2){display:none}}
	/* Phones: no utility bar (the floating call button covers the hotline). */
	@media (max-width:767px){.inntek-topbar{display:none}}
	.inntek-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:var(--inntek-z-header);background:rgba(255,255,255,.9);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s ease-out,box-shadow .2s ease-out}
	.inntek-header.is-scrolled{border-bottom-color:var(--inntek-line);box-shadow:0 8px 24px rgba(12,40,70,.05)}
	.inntek-header__bar{display:flex;align-items:center;gap:24px;height:74px;transition:height .2s ease-out}
	.inntek-header.is-scrolled .inntek-header__bar{height:64px}
	.inntek-logo{display:flex;align-items:center;flex:none}
	.inntek-logo img{height:38px;width:auto}
	.inntek-nav{display:flex;align-items:center;gap:2px;margin:0 0 0 auto;list-style:none;padding:0}
	.inntek-nav a,.inntek-nav .inntek-nav__toggle{display:inline-flex;align-items:center;gap:2px;padding:10px 13px;border-radius:var(--inntek-r-sm);text-decoration:none;color:var(--inntek-ink);font-weight:500;font-size:15.5px;background:none;border:0;transition:color .15s ease-out,background-color .15s ease-out}
	.inntek-nav a:hover,.inntek-nav .inntek-nav__toggle:hover,.inntek-nav .inntek-nav__toggle[aria-expanded="true"]{color:var(--inntek-brand);background:var(--inntek-brand-tint)}
	.inntek-nav .inntek-nav__toggle .inntek-icon{font-size:20px;transition:transform .2s ease-out}
	.inntek-nav .inntek-nav__toggle[aria-expanded="true"] .inntek-icon{transform:rotate(180deg)}
	/* Dropdown Kiến thức */
	.inntek-nav .inntek-nav__dropdown{position:relative}
	.inntek-nav .inntek-nav__dropdown>a .inntek-icon{font-size:20px;transition:transform .2s ease-out}
	.inntek-nav__dropdown-menu{position:absolute;top:calc(100% + 8px);left:50%;width:300px;list-style:none;margin:0;padding:8px;background:var(--inntek-bg);border:1px solid var(--inntek-line);border-radius:var(--inntek-r-lg);box-shadow:var(--inntek-shadow-lift);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .16s ease-out,transform .16s ease-out,visibility .16s;z-index:50}
	.inntek-nav__dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
	.inntek-nav .inntek-nav__dropdown:hover>.inntek-nav__dropdown-menu,.inntek-nav .inntek-nav__dropdown:focus-within>.inntek-nav__dropdown-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
	.inntek-nav .inntek-nav__dropdown:hover>a .inntek-icon,.inntek-nav .inntek-nav__dropdown:focus-within>a .inntek-icon{transform:rotate(180deg)}
	.inntek-nav .inntek-nav__dropdown-menu a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;width:100%;border-radius:var(--inntek-r-md)}
	.inntek-nav .inntek-nav__dropdown-menu .inntek-icon{font-size:22px;color:var(--inntek-brand);margin-top:1px;max-width:none}
	.inntek-nav .inntek-nav__dropdown-menu b{display:block;font-weight:600;font-size:15px;color:var(--inntek-ink)}
	.inntek-nav .inntek-nav__dropdown-menu small{display:block;font-size:13px;color:var(--inntek-muted);font-weight:400;margin-top:1px}
	.inntek-nav .inntek-nav__dropdown-menu li:first-child{border-bottom:1px solid var(--inntek-line);padding-bottom:6px;margin-bottom:6px}
	.inntek-nav .inntek-nav__dropdown-menu a:hover b{color:var(--inntek-brand)}
	.inntek-header__end{display:flex;align-items:center;gap:14px}
	.inntek-lang{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--inntek-muted)}
	.inntek-lang button{background:none;border:0;color:inherit;padding:6px;border-radius:6px}
	.inntek-lang button[aria-pressed="true"]{color:var(--inntek-ink)}
	.inntek-menu-toggle{display:none;background:var(--inntek-bg);border:1px solid var(--inntek-line);border-radius:var(--inntek-r-sm);width:44px;height:44px;align-items:center;justify-content:center;color:var(--inntek-ink)}
	@media (max-width:1180px){.inntek-nav,.inntek-header__end .inntek-btn,.inntek-mega{display:none}.inntek-menu-toggle{display:inline-flex}.inntek-header__end{margin-left:auto}}
	.inntek-mega{position:absolute;left:0;right:0;top:100%;background:var(--inntek-bg);border-top:1px solid var(--inntek-line);border-bottom:1px solid var(--inntek-line);box-shadow:0 30px 60px rgba(12,40,70,.10);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease-out,transform .2s ease-out,visibility .18s}
	.inntek-mega.is-open{opacity:1;visibility:visible;transform:none}
	.inntek-mega__inner{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:32px;padding-block:28px 32px}
	.inntek-mega h4{font-size:13.5px;color:var(--inntek-muted);font-weight:600;margin-bottom:10px}
	.inntek-mega__list{display:grid;gap:2px;list-style:none;padding:0;margin:0}
	.inntek-mega__item{display:flex;gap:14px;padding:11px 12px;border-radius:var(--inntek-r-md);text-decoration:none;transition:background-color .15s ease-out}
	.inntek-mega__item:hover{background:var(--inntek-bg-alt)}
	.inntek-mega__item .inntek-mega__icon{width:40px;height:40px;border-radius:10px;background:var(--inntek-brand-soft);color:var(--inntek-brand);display:grid;place-items:center;flex:none;max-width:none}
	.inntek-mega__item b{display:block;color:var(--inntek-ink);font-size:15px;font-weight:600;line-height:1.35}
	.inntek-mega__item small{display:block;color:var(--inntek-muted);font-size:13.5px;line-height:1.45;margin-top:2px}
	.inntek-mega__products{display:grid;gap:12px}
	.inntek-mega__product{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;padding:12px;border:1px solid var(--inntek-line);border-radius:var(--inntek-r-lg);text-decoration:none;transition:border-color .15s ease-out,box-shadow .2s ease-out}
	.inntek-mega__product:hover{border-color:var(--inntek-brand);box-shadow:var(--inntek-shadow)}
	.inntek-mega__product img{border-radius:8px;border:1px solid var(--inntek-line);aspect-ratio:16/10;object-fit:cover;object-position:left top;width:100%}
	.inntek-mega__product b{display:block;color:var(--inntek-ink);font-size:15.5px}
	.inntek-mega__product small{color:var(--inntek-muted);font-size:13.5px;line-height:1.45;display:block}
	.inntek-drawer{position:fixed;inset:0;z-index:var(--inntek-z-drawer);visibility:hidden}
	.inntek-drawer.is-open{visibility:visible}
	.inntek-drawer__backdrop{position:absolute;inset:0;background:rgba(12,26,43,.35);opacity:0;transition:opacity .2s ease-out}
	.inntek-drawer.is-open .inntek-drawer__backdrop{opacity:1}
	.inntek-drawer__panel{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--inntek-bg);transform:translateX(100%);transition:transform .25s ease-out;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) 20px;overflow-y:auto;overscroll-behavior:contain}
	.inntek-drawer.is-open .inntek-drawer__panel{transform:none}
	.inntek-drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
	.inntek-drawer nav a,.inntek-drawer summary{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;font-size:19px;font-weight:600;color:var(--inntek-ink);text-decoration:none;border-bottom:1px solid var(--inntek-line);list-style:none;cursor:pointer}
	.inntek-drawer summary::-webkit-details-marker{display:none}
	.inntek-drawer details a{font-size:16px;font-weight:500;padding:10px 4px 10px 12px;border:0;color:var(--inntek-text)}
	.inntek-drawer__foot{margin-top:auto;padding-top:24px;display:grid;gap:12px}
	.inntek-drawer__foot .inntek-mono{font-size:15px;color:var(--inntek-muted)}
	.inntek-fab{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:var(--inntek-z-fab);display:grid;gap:10px}
	.inntek-fab a{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;text-decoration:none;box-shadow:0 10px 24px rgba(12,40,70,.18);transition:transform .15s ease-out}
	.inntek-fab a:hover{transform:translateY(-2px)}
	.inntek-fab .inntek-fab__zalo{background:var(--inntek-bg);color:var(--inntek-zalo);font-weight:700;font-size:13px;border:1px solid var(--inntek-line)}
	.inntek-fab .inntek-fab__call{background:var(--inntek-brand);color:var(--inntek-bg)}

	/* WordPress additions: language links, scroll lock while the drawer is open. */
	.inntek-lang a{color:inherit;text-decoration:none;padding:4px 6px}
	.inntek-lang a[aria-current="true"]{color:var(--inntek-ink)}
	.inntek-lang a{display:inline-flex;align-items:center;min-height:32px;border-radius:6px}
	.inntek-lang a:hover{color:var(--inntek-brand)}
	/* Mobile/tablet: the switcher stays in the header bar next to the burger (not in the prototype, added for 002). */
	@media (max-width:1180px){.inntek-lang a{min-height:44px;min-width:36px;justify-content:center;padding:0 6px}.inntek-header__end{gap:6px}}
	.inntek-topbar a,.inntek-footer__contact a,.inntek-drawer__foot a.inntek-mono{color:inherit;text-decoration:none}
	.inntek-topbar a:hover{color:var(--inntek-brand)}
	html.has-drawer-open{overflow:hidden}
	@media (min-width:768px){.inntek-fab{display:none}}
}