/* One page-shell width for desktop across Mộc, feed and IELTS. */
:root{--site-content-max:1240px}
@media(min-width:992px){
  .app-nav>.container-fluid,
  #main-content.container{
    width:min(100%,var(--site-content-max));
    max-width:var(--site-content-max)!important;
    margin-inline:auto;
  }
  .focus-shell #main-content.container{width:var(--site-content-max)}
}
@media(min-width:992px){
  .learning-shell:not(.focus-shell) #main-content.container{
    width:min(calc(100% - 232px),var(--site-content-max));
    margin-left:232px;
    margin-right:0;
  }
}
@media(min-width:992px) and (max-width:1150px){
  .learning-shell:not(.focus-shell) #main-content.container{
    width:calc(100% - 205px);
    margin-left:205px;
  }
}
@media(max-width:991px){
  .app-nav>.container-fluid,#main-content.container{width:100%;max-width:none!important}
}
/* IELTS keeps its detailed navigation in the sidebar; the top item remains a simple home link. */
.learning-shell .nav-group-study .dropdown-menu{display:none!important}
.learning-shell .nav-group-study .dropdown-toggle::after{display:none}

/* One native search form at every breakpoint; no overlay or extra JS needed. */
.app-nav .moc-search{
  display:flex!important;align-items:center;gap:10px;
  width:clamp(210px,19vw,300px);min-width:0;max-width:100%;height:46px;
  margin:0;padding:0 3px 0 14px;box-sizing:border-box;
  border:1px solid #d8e3e8;border-radius:14px;background:#f4f7f9;color:#526c7d;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.app-nav .moc-search:focus-within{border-color:#608ba3;background:#fff;box-shadow:0 0 0 3px rgba(49,106,133,.12)}
.app-nav .moc-search__icon{flex:none;font-size:17px;line-height:1}
.app-nav .moc-search input{flex:1;width:100%;min-width:0;height:44px;padding:0;border:0;border-radius:0;background:transparent;color:#203d50;font-size:16px;line-height:1.4;box-shadow:none}
.app-nav .moc-search input::placeholder{color:#667e8e;opacity:1}
.app-nav .moc-search__submit{display:flex;align-items:center;justify-content:center;gap:6px;flex:none;min-width:52px;min-height:44px;padding:0 10px;border:0;border-radius:11px;background:transparent;color:#28556e;font-size:13px;font-weight:700}
.app-nav .moc-search__submit:hover{background:#e2edf2}
.app-nav .moc-search__submit:focus-visible{outline:2px solid #316a85;outline-offset:-3px}
@media(min-width:992px) and (max-width:1199px){
  .app-nav .moc-search{width:160px;flex:0 1 160px;padding-left:10px;gap:4px}
  .app-nav .moc-search__icon,.app-nav .moc-search__submit span{display:none}
  .app-nav .moc-search__submit{min-width:44px;padding:0}
}
@media(max-width:991px){
  .app-nav>.container-fluid{flex-wrap:wrap;row-gap:8px}
  .app-nav .moc-search{order:5;flex:0 0 100%;width:100%}
}
[data-bs-theme=dark] .app-nav .moc-search{background:#253147;border-color:#43556b;color:#b4cad9}
[data-bs-theme=dark] .app-nav .moc-search:focus-within{background:#202e40;border-color:#8aafc5}
[data-bs-theme=dark] .app-nav .moc-search input{color:#edf4ff}
[data-bs-theme=dark] .app-nav .moc-search input::placeholder{color:#b4c5d2}
[data-bs-theme=dark] .app-nav .moc-search__submit{color:#c2deed}
[data-bs-theme=dark] .app-nav .moc-search__submit:hover{background:#354a60}
@media(prefers-reduced-motion:reduce){.app-nav .moc-search{transition:none}}