/* Isolated Mộc mobile drawer. It intentionally does not reuse Bootstrap collapse styles. */
.app-nav .nav-more:has([aria-current=page])>button,.mobile-nav-utilities:has([aria-current=page])>summary{background:#e8f3f5;color:#193f57!important}.app-nav :is(a,button,summary):focus-visible{outline:3px solid #77a6bd;outline-offset:2px}
.app-nav .nav-more .dropdown-item{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;border-radius:9px;font-size:14px}.app-nav .nav-more .dropdown-item i{width:20px;font-size:18px}.app-nav .nav-more [aria-current=page]{background:#e8f3f5;color:#193f57;font-weight:700}
.mobile-nav-utilities{margin-top:8px;border-top:1px solid var(--moc-line,#e5e8df);padding-top:8px}.mobile-nav-utilities>summary{display:flex;align-items:center;gap:14px;min-height:48px;padding:10px 16px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;list-style:none}.mobile-nav-utilities>summary::-webkit-details-marker{display:none}.mobile-nav-utilities>summary>i:first-child{width:22px;font-size:21px;color:#58717b}.mobile-nav-utilities>summary>i:last-child{margin-left:auto;font-size:12px}.mobile-nav-utilities[open]>summary>i:last-child{transform:rotate(180deg)}.mobile-nav-utilities>div{display:grid;gap:4px;padding:4px 0 0 8px}.site-mobile-drawer__body .mobile-nav-utilities a{min-height:46px;font-size:14px}
@media(min-width:992px){.app-nav{min-height:64px!important;padding-top:8px;padding-bottom:8px}.app-nav>.container-fluid{gap:12px;padding-left:20px!important;padding-right:20px!important}.app-nav #nav{min-width:0;gap:12px}.app-nav .nav-main{gap:4px;margin-top:0;flex-wrap:nowrap}.app-nav .nav-icon-link{display:flex;align-items:center;justify-content:center;gap:8px;width:auto;min-height:44px;padding:10px 12px!important;white-space:nowrap;border-radius:11px}.app-nav .nav-icon-link i{display:inline-block;font-size:18px;margin:0!important}.app-nav .nav-icon-link span{font-size:14px;font-weight:600}.app-nav .nav-icon-link[aria-current=page]{background:#e8f3f5;color:#193f57!important}.app-nav .nav-search{width:clamp(140px,16vw,240px);min-width:0;flex-shrink:1;height:44px}.app-nav .nav-search input{min-width:0}.app-nav .nav-actions{gap:6px;flex-shrink:0}.app-nav .action-circle,.app-nav .profile-trigger{min-width:44px;min-height:44px}.app-nav .navbar-brand{margin-right:0}}
@media(min-width:992px) and (max-width:1199px){.app-nav .nav-search{display:none!important}.app-nav .nav-icon-link{padding:10px!important}.app-nav #nav{flex:1}.app-nav .nav-main{margin-left:auto!important;margin-right:auto!important}}
@media (max-width: 991px) {
  .app-nav{min-height:60px!important;padding:8px 0}
  .app-nav>.container-fluid{min-height:44px}
  .app-nav .navbar-toggler,.app-nav .reminder-mobile{min-width:44px;min-height:44px}
  html.mobile-site-menu-open,
  body.mobile-site-menu-open { overflow: hidden; overscroll-behavior: none; }
  .app-nav > .container-fluid > #nav { display: none !important; }
  .learning-shell #ielts-navigation { display: none !important; }
  .app-nav { z-index: 1100; }
  .site-mobile-drawer { display: flex; position: fixed; inset: 0 0 0 auto; flex-direction: column; width: min(86vw, 360px); height: 100dvh; min-height: 100dvh; margin: 0; padding: calc(12px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; border: 0; border-radius: 0; background: var(--moc-surface, #fffefa); box-shadow: -18px 0 44px rgba(15, 30, 45, .18); visibility: hidden; pointer-events: none; transform: translateX(104%); transition: transform 220ms ease, visibility 0s linear 220ms; will-change: transform; z-index: 1211; }
  .mobile-site-menu-open .site-mobile-drawer { visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s; }
  .mobile-nav-backdrop { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; margin: 0; padding: 0; border: 0; background: rgba(15, 30, 45, .35); opacity: 0; pointer-events: none; transition: opacity 200ms ease; z-index: 1210; }
  .mobile-site-menu-open .mobile-nav-backdrop { opacity: 1; pointer-events: auto; }
  .site-mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 58px; min-height: 58px; padding: 0 2px 11px; border-bottom: 1px solid var(--moc-line, #e5e8df); }
  .site-mobile-drawer__brand { display: inline-flex; align-items: center; gap: 9px; color: var(--moc-ink, #20372e); font-size: 17px; text-decoration: none; }
  .site-mobile-drawer__brand .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .site-mobile-drawer__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--moc-line, #e5e8df); border-radius: 12px; background: transparent; color: var(--moc-ink, #20372e); }
  .site-mobile-drawer__close i { font-size: 18px; }
  .site-mobile-drawer :focus-visible { outline: 3px solid rgba(49, 106, 133, .36); outline-offset: 2px; }
  .site-mobile-drawer__body { display: grid; flex: 0 0 auto; gap: 4px; padding: 13px 0 0; }
  .site-mobile-drawer__body p { margin: 15px 0 2px; padding: 0 9px; color: var(--moc-muted, #718078); font-size: 11px; font-weight: 700; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; }
  .site-mobile-drawer__body p:first-child { margin-top: 0; }
  .site-mobile-drawer__body a { position: relative; display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 16px; border-radius: 12px; color: var(--moc-ink, #20372e); font-size: 15px; font-weight: 600; line-height: 1.25; text-decoration: none; }
  .site-mobile-drawer__body a i { display: grid; place-items: center; flex: 0 0 22px; width: 22px; color: #58717b; font-size: 21px; }
  .site-mobile-drawer__body a:hover { background: #f1f7f6; }
  .site-mobile-drawer__body a[aria-current="page"] { background: #e8f3f5; color: #193f57; font-weight: 700; }
  .site-mobile-drawer__body a[aria-current="page"]::before { position: absolute; left: 0; width: 3px; height: 24px; border-radius: 0 4px 4px 0; background: #316a85; content: ""; }
  .site-mobile-drawer__body a[aria-current="page"] i { color: #316a85; }
  .site-mobile-drawer__foot { flex: 0 0 auto; margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--moc-line, #e5e8df); }
  .site-mobile-drawer__foot a { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 7px 9px; border-radius: 12px; color: var(--moc-ink, #20372e); text-decoration: none; }
  .quang-quick-access { margin: 13px 0 2px; padding: 13px; border: 1px solid #c9dde0; border-radius: 14px; background: linear-gradient(135deg, #f2faf9, #eef5fb); }.quang-quick-access > strong { display: flex; align-items: center; gap: 7px; color: #285466; font-size: 12px; }.quang-quick-access > strong i { color: #367991; }.quang-quick-access > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }.site-mobile-drawer__foot .quang-quick-access a { display: flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 8px; border: 1px solid rgba(54, 121, 145, .16); border-radius: 9px; background: rgba(255,255,255,.82); color: #285466; font-size: 12px; font-weight: 700; }.site-mobile-drawer__foot .quang-quick-access a:last-child { grid-column: 1 / -1; }.site-mobile-drawer__foot .quang-quick-access a:hover { background: #fff; border-color: #9ec0cb; }.site-mobile-drawer__foot .quang-quick-access a i { color: #367991; font-size: 14px; }
  .site-mobile-logout { margin: 12px 0 0; }.site-mobile-logout button { display: flex; align-items: center; width: 100%; min-height: 52px; padding: 0 15px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #bf4838, #982e29); box-shadow: 0 8px 18px rgba(152, 46, 41, .22); color: #fff; font-size: 14px; font-weight: 800; }.site-mobile-logout button:hover { background: linear-gradient(135deg, #cc5140, #a73630); }.site-mobile-logout button i:first-child { margin-right: 10px; font-size: 19px; }.site-mobile-logout button span { flex: 1; text-align: left; }.site-mobile-logout button i:last-child { font-size: 13px; opacity: .82; }
  .site-mobile-drawer__foot .nav-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: #dcebed; color: #24566a; font-size: 13px; font-weight: 800; }
  .site-mobile-drawer__foot a > span:nth-child(2) { min-width: 0; margin-right: auto; }
  .site-mobile-drawer__foot strong,.site-mobile-drawer__foot small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .site-mobile-drawer__foot strong { font-size: 13px; }.site-mobile-drawer__foot small { margin-top: 2px; color: var(--moc-muted, #718078); font-size: 11px; }.site-mobile-drawer__foot > a > i { color: var(--moc-muted, #718078); font-size: 13px; }
}
@media (min-width: 992px) { .site-mobile-drawer,.mobile-nav-backdrop { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .site-mobile-drawer,.mobile-nav-backdrop { transition: none !important; } }