/* v3.5.9.1 — RESPONSIVE CORE REBUILD
   One geometry contract only. Sidebar is always an overlay drawer.
   Navbar is exactly three zones: LEFT | CENTER | RIGHT.
   Device classes handle iOS/Safari "desktop site" layouts where media queries can report a wide viewport. */
:root{
  --portal-safe-l:env(safe-area-inset-left,0px);
  --portal-safe-r:env(safe-area-inset-right,0px);
  --portal-safe-t:env(safe-area-inset-top,0px);
  --portal-safe-b:env(safe-area-inset-bottom,0px);
  --portal-drawer-w:min(88vw,340px);
  --portal-topbar-h:64px;
}
html{width:100%;max-width:100%;min-width:0!important;overflow-x:hidden!important}
body{width:100%;max-width:100%;min-width:0!important;overflow-x:visible!important}
@supports (overflow:clip){html,body{overflow-x:clip!important}}
body.auth-user .shell{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important}
body.auth-user .main{margin-left:0!important;width:100%!important;max-width:100%!important;min-width:0!important;padding-top:var(--portal-topbar-h)!important}
body.auth-user .content{width:100%!important;max-width:1600px!important;min-width:0!important;margin-inline:auto!important;padding:clamp(10px,1.6vw,24px)!important;scroll-margin-top:var(--portal-topbar-h)!important}
img,video,canvas,svg,iframe{max-width:100%}
.grid>*,.dashboard-grid>*,.home-dashboard-v30>*,.home-top-main-v30>*,.home-feed-v30>*,.home-feed-v273>*,.two>*,.form-row>*,.form-grid>*{min-width:0!important}

/* SIDEBAR — always closed until the Menu button is pressed. Never owns layout width. */
body.auth-user #portalSidebar.sidebar{
  position:fixed!important;inset:0 auto 0 0!important;
  width:var(--portal-drawer-w)!important;height:100dvh!important;max-height:100dvh!important;
  margin:0!important;
  padding:calc(14px + var(--portal-safe-t)) 14px calc(18px + var(--portal-safe-b)) max(14px,var(--portal-safe-l))!important;
  display:flex!important;flex-direction:column!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  transform:translate3d(calc(-100% - 24px),0,0)!important;
  visibility:hidden!important;pointer-events:none!important;
  transition:transform .2s ease,visibility 0s linear .2s!important;
  z-index:10000!important;box-shadow:18px 0 46px rgba(19,31,53,.18)!important;
  -webkit-overflow-scrolling:touch!important;touch-action:pan-y!important;
  scrollbar-width:none!important;-ms-overflow-style:none!important;
}
body.auth-user #portalSidebar.sidebar::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
body.auth-user.nav-open #portalSidebar.sidebar{transform:translate3d(0,0,0)!important;visibility:visible!important;pointer-events:auto!important;transition:transform .2s ease,visibility 0s!important}
body.auth-user.nav-open{overflow:hidden!important}
body.auth-user #portalSidebar .brand,body.auth-user #portalSidebar nav,body.auth-user #portalSidebar .sidebar-foot{position:static!important;transform:none!important;height:auto!important;max-height:none!important;overflow:visible!important;flex:0 0 auto!important}
body.auth-user #portalSidebar nav{width:100%!important;padding-bottom:8px!important}
body.auth-user #portalSidebar .sidebar-foot{margin-top:12px!important;padding:10px 6px 18px!important;background:transparent!important}

/* NAVBAR — FINAL PINNED CONTRACT. Fixed to viewport; sidebar/scroll containers cannot move it. Three equal logical regions remain unchanged. */
body.auth-user .topbar{
  position:fixed!important;top:0!important;left:0!important;right:0!important;width:100%!important;z-index:7000!important;
  margin:0!important;transform:none!important;will-change:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr)!important;
  grid-template-areas:"left center right"!important;
  align-items:center!important;
  width:100%!important;max-width:100%!important;min-width:0!important;
  height:var(--portal-topbar-h)!important;min-height:var(--portal-topbar-h)!important;
  column-gap:clamp(4px,.7vw,10px)!important;
  padding-top:7px!important;padding-bottom:7px!important;
  padding-left:max(10px,var(--portal-safe-l))!important;
  padding-right:max(10px,var(--portal-safe-r))!important;
  box-sizing:border-box!important;overflow:hidden!important;isolation:isolate!important;
}
body.auth-user .topbar-left-zone{grid-area:left!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important;min-width:0!important;width:100%!important;overflow:hidden!important;z-index:3!important}
body.auth-user .menu{display:grid!important;place-items:center!important;flex:0 0 34px!important;width:34px!important;height:34px!important;min-width:34px!important;margin:0!important;padding:0!important}
body.auth-user .navbar-brand-logo{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;width:52px!important;max-width:52px!important;height:36px!important;overflow:hidden!important}
body.auth-user .navbar-brand-logo img{display:block!important;width:auto!important;height:auto!important;max-width:50px!important;max-height:34px!important;object-fit:contain!important}
body.auth-user .topbar-date-center{grid-area:center!important;position:relative!important;z-index:1!important;width:100%!important;min-width:0!important;max-width:100%!important;height:32px!important;overflow:hidden!important;white-space:nowrap!important;contain:layout paint!important;clip-path:inset(0)!important;isolation:isolate!important;text-align:center!important}
body.auth-user .topbar-clock-viewport{width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important;contain:paint!important;clip-path:inset(0)!important}
body.auth-user .topbar-clock-track{display:inline-flex!important;align-items:center!important;min-width:max-content!important;max-width:none!important;white-space:nowrap!important;will-change:transform!important}
body.auth-user .top-actions{grid-area:right!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:clamp(3px,.6vw,8px)!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;overflow:hidden!important;z-index:3!important}
body.auth-user .notification-bell,body.auth-user .top-device,body.auth-user .top-profile{flex:0 0 auto!important;min-width:0!important}
body.auth-user .top-profile{max-width:min(100%,150px)!important;overflow:hidden!important}
body.auth-user .top-profile>span:last-child{max-width:104px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* HOME LAYOUT — desktop.
   The weather card and the news rail use one shared right-column contract.
   This keeps both cards exactly aligned until the layout reaches its stack breakpoint. */
body.home-page .home-dashboard-v30,
body.home-page .home-feed-v30,
body.home-page .home-feed-v273{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(300px,var(--portal-news-width,360px))!important;
  gap:18px!important;
  width:100%!important;
  max-width:calc(var(--portal-feed-max,980px) + var(--portal-news-width,360px) + 18px)!important;
  margin-inline:auto!important;
}
body.home-page .home-dashboard-v30{align-items:start!important}
body.home-page .home-top-main-v30{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important;height:auto!important}
body.home-page .home-top-main-v30>.card,
body.home-page .home-dashboard-v30>.weather-v30,
body.home-page .home-feed-v30>.home-news-side,
body.home-page .home-feed-v273>.home-news-side{
  width:100%!important;min-width:0!important;max-width:none!important;justify-self:stretch!important;
}

/* Laptop / reduced desktop window. */
@media (max-width:1100px){
  body.home-page .home-dashboard-v30,
  body.home-page .home-feed-v30,
  body.home-page .home-feed-v273{grid-template-columns:1fr!important;max-width:900px!important}
  body.auth-user .top-profile>span:last-child{display:none!important}
  body.auth-user .top-profile{max-width:42px!important}
}

/* Phone contract. Also applies when Safari is in "desktop site" mode via html.portal-phone. */
@media (max-width:700px){
  :root{--portal-topbar-h:58px}
  body.auth-user .content{padding:10px!important}
  body.auth-user .topbar{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr)!important;padding-left:max(8px,var(--portal-safe-l))!important;padding-right:max(8px,var(--portal-safe-r))!important;column-gap:4px!important}
  body.auth-user .menu{flex-basis:30px!important;width:30px!important;min-width:30px!important;height:30px!important}
  body.auth-user .navbar-brand-logo{width:42px!important;max-width:42px!important;height:30px!important}
  body.auth-user .navbar-brand-logo img{max-width:40px!important;max-height:28px!important}
  body.auth-user .nav-clock-copy{font-size:min(var(--navbar-clock-size,20px),11px)!important}
  body.home-page .home-dashboard-v30,body.home-page .home-feed-v30,body.home-page .home-feed-v273,body.home-page .home-top-main-v30{grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;gap:10px!important}
  body.home-page .home-top-main-v30{height:auto!important}
  body.home-page .home-top-main-v30>.birthday-calendar-card,body.home-page .home-top-main-v30>.events-card,body.home-page .home-dashboard-v30>.weather-v30{height:auto!important;min-height:0!important;max-height:none!important}
  .two,.form-row,.form-grid,.dashboard-grid{grid-template-columns:1fr!important}
  .card{max-width:100%!important}
  .table-wrap,.attendance-full-scroll{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
}
html.portal-phone body.auth-user .content{padding:10px!important}
html.portal-phone body.auth-user .topbar{grid-template-columns:minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr)!important;height:58px!important;min-height:58px!important;padding-left:max(8px,var(--portal-safe-l))!important;padding-right:max(8px,var(--portal-safe-r))!important;column-gap:4px!important}
html.portal-phone body.auth-user .menu{flex-basis:30px!important;width:30px!important;min-width:30px!important;height:30px!important}
html.portal-phone body.auth-user .navbar-brand-logo{width:42px!important;max-width:42px!important;height:30px!important}
html.portal-phone body.auth-user .navbar-brand-logo img{max-width:40px!important;max-height:28px!important}
html.portal-phone body.auth-user .top-profile>span:last-child{display:none!important}
html.portal-phone body.auth-user .top-profile{max-width:42px!important}
html.portal-phone body.auth-user .nav-clock-copy{font-size:min(var(--navbar-clock-size,20px),11px)!important}
html.portal-phone body.home-page .home-dashboard-v30,html.portal-phone body.home-page .home-feed-v30,html.portal-phone body.home-page .home-feed-v273,html.portal-phone body.home-page .home-top-main-v30{grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;gap:10px!important}
html.portal-phone body.home-page .home-top-main-v30{height:auto!important}
html.portal-phone body.home-page .home-top-main-v30>.birthday-calendar-card,html.portal-phone body.home-page .home-top-main-v30>.events-card,html.portal-phone body.home-page .home-dashboard-v30>.weather-v30{height:auto!important;min-height:0!important;max-height:none!important}
html.portal-phone .two,html.portal-phone .form-row,html.portal-phone .form-grid,html.portal-phone .dashboard-grid{grid-template-columns:1fr!important}

/* Tablet/coarse-device safety if Safari reports a desktop-sized viewport. */
html.portal-tablet body.home-page .home-dashboard-v30{grid-template-columns:1fr!important}
html.portal-tablet body.home-page .home-feed-v30,html.portal-tablet body.home-page .home-feed-v273{grid-template-columns:1fr!important;max-width:900px!important}
html.portal-tablet body.auth-user .top-profile>span:last-child{display:none!important}
html.portal-tablet body.auth-user .top-profile{max-width:42px!important}

/* Apple landscape safe areas: only outer padding changes; geometry remains 3-zone. */
@media (orientation:landscape) and (max-height:600px){
  :root{--portal-topbar-h:54px}
  body.auth-user .topbar{height:54px!important;min-height:54px!important;padding-left:max(14px,var(--portal-safe-l))!important;padding-right:max(14px,var(--portal-safe-r))!important}
  body.auth-user .top-profile>span:last-child{display:none!important}
  body.auth-user .top-profile{max-width:42px!important}
  body.auth-user .nav-clock-copy{font-size:min(var(--navbar-clock-size,20px),11px)!important}
}

/* v3.5.9.1 notification bell hotfix — keep responsive geometry unchanged.
   The topbar/right zone must allow the notification dropdown to paint outside
   the 64px navbar; the clock itself remains clipped by its own viewport. */
body.auth-user .topbar{overflow:visible!important}
body.auth-user .topbar-left-zone{overflow:hidden!important}
body.auth-user .topbar-date-center,
body.auth-user .topbar-clock-viewport{overflow:hidden!important}
body.auth-user .top-actions{overflow:visible!important}
body.auth-user .notification-bell{position:relative!important;overflow:visible!important;z-index:20!important}
body.auth-user .notification-bell[open]{z-index:12020!important}
body.auth-user .notification-bell .notification-pop{z-index:12030!important;pointer-events:auto!important}

/* v3.8.23: Collector uses the same always-overlay drawer contract; inline menu fallback lives in layout.php. */


/* v6.6.0 — Navbar chỉ còn Thứ · Ngày · Âm lịch. Không hiển thị đồng hồ ở mọi chế độ. */
body.auth-user .navbar-time-fragment{display:none!important}
body.auth-user .topbar-clock-viewport.is-static{height:auto!important;min-height:30px!important;overflow:visible!important;contain:none!important;clip-path:none!important}
body.auth-user .topbar-clock-viewport.is-static .topbar-clock-track{display:flex!important;width:100%!important;min-width:0!important;max-width:100%!important;justify-content:center!important;transform:none!important;animation:none!important;will-change:auto!important;white-space:normal!important}
body.auth-user .topbar-clock-viewport.is-static .nav-clock-copy{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;padding:0!important;text-align:center!important;white-space:normal!important;line-height:1.12!important;overflow:visible!important}
body.auth-user .topbar-clock-viewport.is-static .navbar-calendar-fragment{display:block!important;white-space:normal!important;overflow-wrap:normal!important;word-break:keep-all!important}
@media(max-width:700px){
  body.auth-user .topbar{grid-template-columns:minmax(80px,1fr) minmax(145px,1.85fr) minmax(78px,1fr)!important;height:auto!important;min-height:58px!important}
  body.auth-user .topbar-date-center{height:auto!important;min-height:28px!important;align-self:center!important}
  body.auth-user .nav-clock-copy{font-size:min(var(--navbar-clock-size,20px),11.5px)!important}
  body.auth-user .topbar-clock-viewport.is-static .nav-clock-copy{font-size:min(var(--navbar-clock-size,20px),11px)!important}
}
@media(max-width:430px){
  body.auth-user .topbar{grid-template-columns:minmax(72px,.95fr) minmax(132px,1.75fr) minmax(72px,.95fr)!important;padding-inline:6px!important}
  body.auth-user .nav-clock-copy{font-size:10px!important}
  body.auth-user .topbar-clock-viewport.is-static .nav-clock-copy{font-size:10px!important;line-height:1.08!important}
}


/* v6.6.0 — one stable responsive canvas. Wide monitors no longer stretch modules indefinitely. */
:root{--portal-standard-max:1440px}
body.auth-user .content{width:min(calc(100% - 24px),var(--portal-standard-max))!important;max-width:var(--portal-standard-max)!important;margin-inline:auto!important}
body.auth-user .main{min-width:0!important;max-width:100vw!important;overflow-x:clip!important}
body.auth-user .card,body.auth-user .home-feed-v30,body.auth-user .home-feed-v273,body.auth-user .home-dashboard-v30,body.auth-user .home-top-main-v30{min-width:0!important}
@media(max-width:1480px){body.auth-user .content{width:calc(100% - 20px)!important}}
@media(max-width:700px){body.auth-user .content{width:100%!important;margin-inline:0!important}}
.portal-assistant{max-width:calc(100vw - 16px)!important;max-height:calc(100dvh - 16px)!important}